vue指令之v-bind

1.v-bind的基本使用
vue指令之v-bind
vue指令之v-bind
vue指令之v-bind
点击a标签可以跳转至百度

v-bind的作用是动态来决定属性,比如说动态决定图片地址或者a标签的href
注意:
v-bind后面是:属性名=,我的理解是表示绑定这个属性,绑定之后,对应的值要去vue的数据里面找。
当我们在控制台改变url时,对应也会变化。(v-bind简写为 “ : ”)
2.v-bind绑定class(对象和数组方法)
vue指令之v-bind
vue指令之v-bind
vue指令之v-bind
当我点击按钮后
vue指令之v-bind
vue指令之v-bind
v-bind绑定对象的方式":属性名=‘{key:value}’",v-bind还可以绑定方法,详情见上图,通过绑定getclass方法和button的点击改变data的数据来改变样式。
数组的方法和对象类似
vue指令之v-bind
vue指令之v-bind
vue指令之v-bind
3.v-bind绑定style(对象和数组语法)
vue指令之v-bind
通过对象v-bind绑定对象作为样式
vue指令之v-bind
绑定style和绑定class其实大同小异,也是可以使用对象语法和数组语法
vue指令之v-bind
vue指令之v-bind
数组是将样式整体作为对象放入data中,具体看图中data,数组一般用的少。