一 v-bind命令
1.1 简介
Vue中动态绑定值的方法常使用Mustache插值语法进行绑定,而绑定属性和组件间通信传值的时候则使用v-bind
命令。
常见的需要动态绑定的属性有
- v-bind:src
图片链接
- v-bind:herf
网页链接
- v-bind:class
class绑定
不过我们常用语法糖的形式简写 如:src="\xxx"
1.2 绑定class
对象语法
用法一:直接通过{}绑定一个类,对象的key前为css属性名称,对象的value可为Boolean值的变量或者具体的属性值。为Boolean值控制属性的展示与否,具体css属性值在样式表内声明为。
<h2 :class="{
'active': isActive}">Hello World</h2>
<h2 :class="{
'fontsize': fontsize+'px'}">Hello World</h2>
用法二:作为对象语法,也支持多个对象,传入多个值
<h2 :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突,例如下方如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{
'active': isActive, 'line': isLine}">Hello World