一.Class绑定
数据绑定的一个常见需求场景师操纵元素的CSS class列表,因为class是attribute,我们可以和其他attribute一样使用v-bind将他们和动态的字符串绑定,但是在处理较为复杂的绑定时,拼接字符串容易出现错误。因此Vue专门为class的v-bind用法进行了增强:可以绑定对象或者数组~
<p :class="{ziti:zitiTest,yanse:yanseTest}">属性绑定</p>
zitiTest:false, yanseTest:true
.ziti{ font-size: 36px; .yanse{ color: blue; }}
如下图,由于zitiTest的值为false而yanseTest的值为true,所以仅显示颜色的样式~
还有一种数组的写法:
<p :class="['yanse','ziti']">另一个属性绑定</p>
二.Style绑定
同理,没什么难度:
<p :style="{color:'red',fontSize:'30px'}">又来一个</p>
三.侦听器
即watch,每次响应式属性发生变化时触发一个函数~
所谓响应式属性,即return中的元素:
export default{ data(){ return{ count:0, club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'], zitiTest:false, yanseTest:true }}}
<p @click="changeT">{{ textY }}</p>
return{ count:0, club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'], zitiTest:false, yanseTest:true, textY:'原来的值~' }
watch:{ textY(newValue,oldValue){ console.log(newValue+" "+oldValue); //可以轻松拿到变化前后的值 } }
需要注意的是,watch和method、data同级~
四.表单输入绑定
v-model的存在大大减少了绑定数据的工作量~
<form>
<input type="text" v-model="myname">
<p>{{ myname }}</p>
</form>
return{
maname:'',
count:0,
club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
zitiTest:false,
yanseTest:true,
textY:'原来的值~'
}