对象语法
通常,我们会传给v-bind一个对象,这样我们可以动态地切换一些属性值,比如绑定Class或者Style,像这样
// isBlue是布尔值,blue类是否存在取决于isBlue是否为真
<div :class="{ blue: isBlue }"></div>
// thisFont是变量,字体大小随thisFont而变化
<div :style="{ fontSize: thisFont + 'px' }"></div>
// 当然如果属性多的话,可以这样写
<div :style="styleBox"></div>
// JS
data () {
return {
styleBox: {
fontSize: 20px,
color: #ccc,
...
}
}
}
数组语法
但是最近遇到一个问题,我想动态地为a链接插入不同的tel:号码,这样点击a链接时可以唤起手机的号码识别。但是理想总是丰满的,现实却是对象语法并没有起到作用,这时就轮到数组语法大显神威了,且看下面代码:
// 我的代码中phoneNumber是计算属性,返回一个三元表达式
<a :href="tel:+[phoneNumber]"></a>
// 数组语法还能将多个对象绑定到某个元素上,像这样
<div :style="[firstStyle, secondStyle, ...]"></div>
// 我们可以将对象和数组语法结合起来,兼容属性
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>