ciya68

vue动态绑定内联样式

发布时间: 2022.06.13
阅读量: 58
分享:

1. 不好的做法: 将style属性看做一个普通的字符串属性进行绑定。

         a. <元素 :style="变量">

                  data:{

                          变量: "css属性:值; css属性:值;..."

                  }

         b. 问题: 极其不便于只操作其中某一个css属性

    


 2. 好的办法: 将style看做一个对象来绑定。每个css属性都是对象中的一个属性。

                          结果: "css属性1:属性值1; css属性2:属性值2;..."

                                           ↑            ↑               ↑             ↑

         a. <元素 :style="{ css属性1: 变量1, css属性2: 变量2, ...  }"

                  data:{

                          变量1:"属性值1",

                          变量2:"属性值2",

                          ... ...

                  }


         b. 优点: 轻易只修改其中某一个css属性值,而不影响其他属性值

         c. 问题: 如果多个css属性的变量零散的保存在data中,如果多个元素都需要控制内联样式,就极容易发生冲突。

         d. 示例: 控制一个飞机的飞行

         1_style.html


image.png

image.png


 3. 更好的解决办法:企业网站设计,品牌网站建设,将每个元素所需的所有内联样式变量,集中保存在data中的一个对象里。

        a. <元素1  :style="变量名1">

           <元素2  :style="变量名2">

                  data:{

                         变量名1:{

                                   css属性:值,

                                            ... : ...

                          },

                          变量名2:{

                                   css属性:值,

                                            ... : ...

                          }

         b. 优点: 避免不同元素间相同css属性的冲突

         c. 示例: 控制两个飞机的飞行

         1_style2.html

image.png

image.png



4. 问题: 如果元素上有些内联css属性是固定不变的,而有些css属性是可能发生变化的?

    

5.解决:对于网站开发而言,其实在一个元素上写死的固定不变的style和动态变化的:style是可以并存的。最后运行的结果是,:style动态生成的css属性会和style中固定不变的属性合并为最终应用到元素上的style属性。


         结果: style="固定不变的css属性:值; 变化的css属性: 值; ..."

                                        ↑                                           ↑

         <元素 style="固定不变的css属性:值"   :style="变量"

         data:{

                  变量:{

                          变化的css属性: 值

                  }

         }

         比如: <img style="left:50%" :style="img1Style" src="img/p3.png">

         data:{

        img1Style:{

          marginLeft:"-200px",

          bottom:"25px",

        }

         }

image.png


6问题: DOM中经常批量修改一个元素的多个css属性,如果单个修改每个css属性值,代码会很繁琐

7.解决: 用class来代替单独修改每个css属性。


分享到微信朋友圈 ×

Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号 Copyright © 2016 ciya. Inc. All rights reserved