VUE-v-bind以及动态绑定Class和style

 

概述

v-bind通常用来绑定属性的,格式是v-bind:属性名 = "值",简写:属性名 = "值" ;

v-bind主要就是动态更新DOM的属性的;

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

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

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

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

 

 

在对象语法下

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

{{name}}

{{name}}真好看!
var myApp = new Vue({ el:"#container", // 条件比较少 data:{ isName:true, isAge:false, name:"功守道" }, // 条件多的时候 computed:{ addClass:function(){ return { checked:this.isName&&!this.isAge } } } })

说明:

    1)当v-bind:class的表达式过长或者逻辑复杂(一般当条件多于两个的时候,可以考虑采用计算属性,返回一个对象)

 

 

数组语法

 

在数组语法下(需要绑定多个class名的时候,可以采用):
1)值是一个数组(不论采用何种方法,最后值是一个数组就行)

2)在数组语法中可以使用对象语法,数组中的某一项可以是一个对象,当然当条件比较多的时候建议使用计算属性,返回一个数组即可;

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

       
{{name}}
{{name}},还行吧!
{{name}},有点不好看
// 数组语法: var myApp1 = new Vue({ el:"#container1", // 当条件比较少的时候 data:{ judge1:false, isAge:true, name:"功夫熊猫", huClas:"haha", heClas:"heihei", ju:"huijia" }, // 条件多的时候 computed:{ arrMethod:function(){ return [ this.ju, { heClas:this.judge1&&this.isAge, huClas:this.isAge } ] } } })

 

绑定style属性

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

        
	
{{house}}

{{house}}

{{house}}

你可能感兴趣的:(【VUE】)