【vue】vue动态样式绑定详解_05

目录

⬛ 绑定样式

1. 绑定内联样式

2. 绑定class

❣️ 巩固总结：样式绑定——动态绑定元素的class

❣️ 巩固总结：样式绑定——动态绑定内联样式

❣️ 小结

💥 扩展：this判断—8种指向

⬛ 总结：知识点提炼

【前文回顾】👉 vue双向数据绑定的原理解析及代码实现_04

⬛ 绑定样式

1. 绑定内联样式

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

         a.

                  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

              img{      position:fixed;      left:50%;    }    
            <!--  -->      
      var vm=new Vue({      el:"#app",      data:{ marginLeft:"-100px", //必须带单位 bottom:"50px"      }    })  

运行结果：

         (3). 更好的解决办法: 将每个元素所需的所有内联样式变量，集中保存在data中的一个对象里。

         a.

                  data:{
                         变量名1:{

                                   css属性:值,

                                            ... : ...

                          },

                          变量名2:{

                                   css属性:值,

                                            ... : ...

                          }

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

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

         1_style2.html

              img{      position:fixed;    }    
          
      var vm=new Vue({      el:"#app",      data:{ img1Style:{   marginLeft:"-200px",   bottom:"25px", }, img2Style:{   marginLeft:"100px",   bottom:"100px" }      }    })  

运行结果：

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

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

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

                                        ↑                                           ↑

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

         data:{

                  变量:{

                          变化的css属性: 值

                  }

         }

         比如:

         data:{

        img1Style:{

          marginLeft:"-200px",

          bottom:"25px",

        }

         }

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

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

2. 绑定class

         (1). 不好的方法: 将整个class字符串，看做一个普通的字符串属性绑定.

        
         data:{
                  变量: "class1  class2  ..."

         }

         缺点: 极其不便于修改其中某一个class

         (2). 好的方法: 将class看做一个对象来绑定。

         a. <元素 :class="{ class1: 变量1, class2: 变量2, ... }"

                  data:{

                          变量1: true或false,

                          变量2: true或false,

                          ... : ...

                  }

                  说明: 当一个class对应的变量值是true，则这个class会出现在编译后的元素上，起作用；当一个class对应的变量值为false，则这个class不会出现在编译后的元素上，不起作用！

         b. 优点: 极其便于修改其中某一个class

         c. 示例: 验证手机号

         2_class.html

              .span-cls{      padding:5px 10px;    }    .success{      background-color:lightGreen;      border:green;      color:green;    }    .fail{      background-color:pink;      border:red;      color:red;    }      
    手机号:        <!-- {{msg}} -->    {{msg}}  
      //2. 创建new Vue()对象    var vm=new Vue({      el:"#app",      //3. 创建模型对象      //因为界面中共需要4个变量，所以:data:{ phone:"", success:false, fail:false, msg:""      },      //因为界面中需要一个事件处理函数      methods:{ vali(){   //定义验证手机号的正则表达式：    var reg=/^1[3-9]\d{9}$/;   //用正则验证手机号正确   if(reg.test(this.phone)==true){     //就修改span为验证通过的样子     this.success=true;     this.fail=false;     this.msg=" √ 手机号格式正确";   }else{//否则如果验证失败     //就修改span为验证失败的样式     this.success=false;     this.fail=true;     this.msg=" × 手机号格式不正确"   } }      }    })  

运行结果： 

         d. 问题: 如果多个元素都需要用同一个class，但是启用和禁用的状态各不相同，如果将变量直接保存在data中，极容易发生冲突

         (3). 更好的方法: 将一个元素的多个class包裹在一个对象变量中:

         a.

                  data:{

                          变量1:{

                                   class名: true或false,

                                   ... : ...

                          },

                          变量2:{

                                   class名: true或false,

                                   ... : ...

                          }

                  }

         b. 优点: 即使多个元素，共用同一个class，也不会发生冲突！

         c. 示例: 验证手机号和身份证号

         2_class3.html

                            .span-cls { padding: 5px 10px;      }      .success { background-color: lightGreen; border: green; color: green;      }      .fail { background-color: pink; border: red; color: red;      }                
      手机号:      {{phoneMsg}}
      身份证号:      {{pidMsg}}    
          //2. 创建new Vue()对象      var vm = new Vue({ el: "#app", //3. 创建模型对象 //因为界面中共需要4个变量，所以: data: {   phone: "", //接文本框中的值   pid: "", //接文本框中的值   phoneSpan: {     //控制手机号验证结果的样式     success: false,     fail: false,   },   pidSpan: {     //控制身份证号验证结果的样式     success: false,     fail: false,   },   phoneMsg: "", //保存手机号的错误提示   pidMsg: "", //保存身份证号的错误提示 }, //因为界面中需要一个事件处理函数 methods: {   valiPhone() {     //定义验证手机号的正则表达式：     var reg = /^1[3-9]\d{9}$/;     //用正则验证手机号正确     // 复习小程序中js高级第2天     if (reg.test(this.phone) == true) {//就修改span为验证通过的样子this.phoneSpan = {  success: true,  fail: false,};this.phoneMsg = " √ 手机号格式正确";     } else {//否则如果验证失败//就修改span为验证失败的样式this.phoneSpan = {  success: false,  fail: true,};this.phoneMsg = " × 手机号格式不正确";     }   },   valiPid() {     //定义验证身份证号的正则表达式：     var reg = /^\d{15}(\d\d[0-9x])$/i;     //用正则验证身份证号正确     // 复习小程序中js高级第2天     if (reg.test(this.pid) == true) {//就修改span为验证通过的样子this.pidSpan = {  success: true,  fail: false,};this.pidMsg = " √ 身份证号格式正确";     } else {//否则如果验证失败//就修改span为验证失败的样式this.pidSpan = {  success: false,  fail: true,};this.pidMsg = " × 身份证号格式不正确";     }   }, },      });      

运行结果： 

         (4). 问题: 如果元素上有些class是固定不变的，而有些class是可能发生变化的？

         (5). 解决: 其实在一个元素上写死的固定不变的class和动态变化的:class是可以并存的。最后运行的结果是，:class动态生成的class字符串会和class中固定不变的class字符串合并为最终应用到元素上的class属性。

❣️ 巩固总结：样式绑定——动态绑定元素的class

我们可以通过数组和对象的两种形式绑定元素的 Class。

💦 对象语法形式 💦

在巩固总结上面的文章篇幅里，讲解的便是绑定元素的class的对象语法，在这里我们重新再回顾一下。

1️⃣ 对象语法

通过传给 v-bind:class 一个对象，以动态地切换 class：

代码解释： 上面的语法表示 show 这个 class 存在与否将取决于数据属性 isShow 是否为真值。 

实例演示

          .hide {    display: none;  }  
     
Hello !
  
 var vm = new Vue({    el: '#app',  data: {    isHide: true  },})//vm.isHide = true

代码解释： HTML 代码第 2 行，我们给 div 绑定样式，当 isHide 为真值时， 其渲染结果为 

，否则 

。 打开控制台，修改 vm.isHide 的值可以动态改变页面效果。

2️⃣ 与普通的 class 属性共存

此外，v-bind:class 指令也可以与普通的 class 属性共存。 语法：

data: {  isShow: true,  hasError: false}

          
     
Hello !
  
 var vm = new Vue({    el: '#app',  data: {    classObject: {      show: true,      'text-danger': false    }  },})

          
     
  
 var vm = new Vue({el: '#app',  computed: {    //对象语法————classObject: function(){...}等价于classObject(){...}    classObject: function () {      return { show: true, //对象的属性名引号可加可不加，若属性名里有特殊字符，属性名必须加引号） 'text-danger': false      }    }  }})

          
     
Hello !
  
 var vm = new Vue({el: '#app',  data: {  classA: 'classA',    classB: 'classB1 classB2'  },})

          
     
  
 var vm = new Vue({el: '#app',  data: {    backgroundColor: 'red',    width: 300  }})

          
     
  
 var vm = new Vue({el: '#app',  data: {  styleObject: {      "background-color": 'red',      width: '300px'    }  },})

          
     
  
 var vm = new Vue({el: '#app',  data: {    stylesA: {      "background-color": 'red',      width: '300px'    },    stylesB: {      color: '#fff',      height: '300px'    }  }})

上一篇
Kubernetes社区发行版:开源容器云OpenShift Origin(OKD)认知
下一篇
程序员常用 10 种算法-二分查找算法(非递归)