Vue实战--v-bind以及动态绑定Class和style(转)

时间:2019-09-17
本文章向大家介绍Vue实战--v-bind以及动态绑定Class和style(转),主要包括Vue实战--v-bind以及动态绑定Class和style(转)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

本文链接:https://blog.csdn.net/codesWay/article/details/78664148
v-bind通常用来绑定属性的,格式是v-bind:属性名 = "值",简写:属性名 = "值" 

之前我们知道v-bind主要就是动态更新DOM的属性的,class作为DOM的属性当然也不例外,那么v-bind怎么动态更新class呢,分为三种方法:对象语法和数组语法,还有就是变量语法:

变量语法:v-bind:class = "变量",变量形式 ,这里的变量的值,通常是在css定义好的类名;

数组语法:v-bind:class= "[变量1,变量2]" ,数组形式,其实跟上面差不多,只不过可以同时绑定多个class名;

对象语法:v-bind:class =  {classname1:boolean,classname2:boolean},对象形式,这里的classname1(2)其实就是样式表中的类名,这里的boolean通常是一个变量,也可以是常量、计算属性等,这种方法也是绑定class最常用的方式。

一,在对象语法下:

 用v-vind动态设置class名,其值是一个对象(如上例子,当isName为真的时候就会存在类fontCol):

HTML部分

1 <div id="container">
2 <p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
3 <i :class="addClass">{{name}}真好看!</i>
4 </div>

JS部分

 1 var myApp = new Vue({
 2   el:"#container",
 3   // 条件比较少
 4   data:{
 5     isName:true,
 6     isAge:false,
 7     name:"功守道"
 8   },
 9   // 条件多的时候
10   computed:{
11     addClass:function(){
12       return {
13         checked:this.isName&&!this.isAge
14       }
15     }
16   }
17 })


注意:既然是一个对象,那么该对象内的属性可能不唯一,但总是每一项为真的时候,对应的类名就会存在。

1.通过v-bind更新的类名和元素本身存在的类名不冲突,可以优雅的共存
2.不过当v-bind:class的表达式过长或者逻辑复杂(一般当条件多于两个的时候,可以考虑采用计算属性,返回一个对象)

二,在数组语法下(一般用在当需要绑定多个class名的时候):
1.值是一个数组(不论采用何种方法,最后值是一个数组就行)
2.在数组语法中可以使用对象语法,数组中的某一项可以是一个对象,当然当条件比较多的时候建议使用计算属性,返回一个数组即可(例子略),

3.数组中的值也可以直接就是class名,也可来源于data项

HTML部分

1 <div id="container1">
2         <!-- 仅仅数组 -->
3         <div  :class="[huClas,heClas]">{{name}}</div>
4         <!-- 三元表达式 -->
5         <div :class="[isAge?huClas:heClas,ju]">{{name}},还行吧!</div>
6         <!-- 该模式下类名huijia一直存在,还有一个类名根据isAge的真假来判断去留 -->
7         <div :class="arrMethod">{{name}},有点不好看</div>
8         <!-- 计算属性huijia一直存在,其他的根据情况 -->
9     </div>

JS部分

 1 // 数组语法:
 2 var myApp1 = new Vue({
 3     el:"#container1",
 4     // 当条件比较少的时候
 5     data:{
 6         judge1:false,
 7         isAge:true,
 8         name:"功夫熊猫",
 9         huClas:"haha",
10         heClas:"heihei",
11         ju:"huijia"
12     },
13     // 条件多的时候
14     computed:{
15         arrMethod:function(){
16             return [
17         this.ju,
18             {
19             heClas:this.judge1&&this.isAge,
20             huClas:this.isAge
21              }
22         ]
23     }
24     }
25 })
26      

v-bind绑定style属性(不常用,仅作了解)
v-bind绑定style,有两种写法一种是对象写法,如下例,一种是数组写法(不常用,数组中的每一项其实都是一个样式对象,其实直接写在一个对象里就行了。);

 1 <!-- 直接绑定 -->
 2     <div id="container" :style="{color:color,fontSize:fontSize+'px'}">
 3         {{house}}
 4         <!-- 计算属性 -->
 5         <h2 :style="style1">{{house}}</h2>
 6         <!-- data中的 -->
 7         <h3 :style="style">{{house}}</h3>
 8     </div>
 9     <script type="text/javascript" src="../../dist/vue.min.js"></script>
10     <script type="text/javascript">
11         var myApp = new Vue({
12             el:"#container",
13             data:{
14                 house:"世家星城二期",
15                 color:"red",
16                 fontSize:18,
17                 style:{
18                     background:"yellow",
19                     fontSize:24+"px"
20                 }
21             },
22             // 计算属性
23             computed:{
24                 style1:function(){
25                     return {
26                         fontSize:this.fontSize+"px",
27                         fontWeight:"italic",
28                         border:"1px solid #ff0000"
29                     }
30                 }
31             }
32         })

对于对象语法注意事项:

1.属性名一般采用驼峰命名法,属性值可以来源于data项,也可以是自己设置的固定值,
2.不建议直接在DOM中写对象,因为不容易维护,可以将样式对象写在data项中或者是计算属性中

原文地址:https://www.cnblogs.com/nlyangtong/p/11532360.html