v-bind详解

闲话不多说，接触过vue的童鞋都知道一个很常用的指令，那就是v-bind，当然它也有简写方式——":"（见以下代码）：

// 完整版
<a v-bind:href="url"></a>

// 简写版
<a :href="url"></a>

下面主要介绍一下这个指令的语法：

对象语法

通常，我们会传给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>

好啦，这里就是我所知道的v-bind指令的用法了，各位不吝赐教噢！！！

v-bind详解

对象语法

数组语法

推荐阅读更多精彩内容