vue基础之动态绑定属性v-bind指令

v-bind,

动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。

	
百度一下
//和上面a标签中的href属性赋值一样的效果 //v-bind:加属性名=“变量名” 百度一下

v-bind由于开发经常使用,所以官方还有一种缩写方式:v-bind:属性 = :属性

	//v-bind缩写也能得到同样的效果
	v-bind百度一下
    v-bind百度一下

在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。

对象值的示例:

动态绑定属性--class类名--对象
绑定style

绑定 class

动态绑定属性--class类名
isActive为true,绑定active类名,line类名不绑定
//直接绑定类名如果过长,也可放进函数methods里面,获取类名的对象,和上面是一样的结果。
动态绑定属性--class类名

class类名除了可以动态绑定对象还能绑定数组:

//在属性中是数组的话,加上引号,就和class=“active line”一样的效果
112233
//如果不加上引号就是变量
112233
动态绑定属性--放进函数方法获取class类名

绑定 style

isActive为true,绑定active类名,line类名不绑定

当然还有组件的prop 绑定,以后再慢慢学习!

你可能感兴趣的:(vue基础之动态绑定属性v-bind指令)