Vue指令 - v-bind(:)

v-bind定义

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

HTML Css属性可以使用v-bind指定绑定数据，以便在不同的情况下产生不同的效果(动态绑定)。

简单的应用

HTML:
<div id="app">
    <p v-bind:title="ti">示例文字</p>
    <p v-bind:style="bg">示例文字</p>
    <p v-bind:class="cs">示例文字</p>
    <input type="text" v-bind:placeholder="ph + '+hello world'">
</div>

var vm = new Vue({
    el:'#app',
    data:{
        ti:'title提示!',
        bg:'background:red',
        cs:'reset',
        ph:'示例文字',
    },
})

注意：省略v-bind改为使用 " : " 为简写方式，效果相同。如：:title。

对象语法

Vue允许传给属性一个对象，实现动态绑定。
例子：传入对象，动态应用class类。

HTML：
<div id="app">
    <p v-bind:class="{ reset:reset }">默认应用了reset类</p>
    <button v-on:click="clos">不应用reset类</button>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        reset:true,
    },
    methods:{
        clos(){
            this.reset = false;
        };
    },
})
// reset类的应用与否，与data对象中的reset属性值(true/false)有关。

可以看到，当点击按钮时，不再应用class类，实现了简单的动态绑定。

Vue允许传入更多属性来动态切换多个class，并且可以与普通class共存 ？

HTML：
<div id="app">
    <p v-bind:class="{ reset:reset,head:head,foot:foot }" class="public">
    默认应用了reset类
    </p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        reset:true,
        head:true,
        foot:false//不应用
    },
})
// foot类的应用与否，与data对象中的foot属性值(true/false)有关。

可以看到，public(普通)、reset、head都应用到了class上，至于foot为什么没有应用，这要取决于foot属性的值：truthiness。

数组语法

Vue允许传给属性一个数组对象，实现应用一个class列表。
例子：传入数组，给元素添加一组class。

HTML:
<div id="app">
    <p v-bind:class="[ resetClass,headClass,footClass ]">示例文字</p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        resetClass:'reset',
        headClass:'head',
        footClass:'foot',
    },
})

可以看到，一组class成功被应用到了元素上，非常适合添加一组(很多)类。

如果想根据条件切换列表中的class，Vue也提供了两种方式 ？

（1）三元表达式

这个方法可以使调用或渲染数据时逐级筛选。也可以在某种情景下提高代码效率，但只适合简单的逻辑判断场景，不适合复杂的逻辑判断。

// 这里沿用数组语法的代码
<p v-bind:class="[ resetClass ? headClass : ‘’,footClass ]">示例文字</p>

如果resetClass始终为false，则一直应用footClass，还有，一旦条件过多时这样写难免有些繁琐。

（2）嵌套对象

在数组中嵌套对象，Vue允许我们这么做，也弥补了三元表达式条件过多繁琐的问题。

HTML：
<div id="app">
    <p v-bind:class="[ {resetClass},headClass,footClass ]">示例文字</p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        resetClass:false,
        headClass:'head',
        footClass:'foot',
    },
})

在对象中，添加方法让其完成复杂的逻辑完成更灵活地添加也是一个好法子。