在Vue中，如果我们需要绑定属性就可以用到v-bind，是不是有对这个指令有印象啊，我们在Day 14的时候有大略提到，这几天再来特别介绍v-bind用在class跟style上的binding吧。

v-bind可以用表达式也可以用物件(object)、阵列(array)

基本的属性绑定

这里先举例用v-bind绑定连结还有输入框，其实大部分的属性都可以用这种方式做绑定，资料绑定之後才能传到後台，这样可以做到全组件由後端(资料)控管，使用资料去驱动画面。

<div id="app">
    <a v-bind:href="link.href" v-bind:target="link.target">{{link.content}}</a>
    <input v-bind:type="input.type">
</div>

 <script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                link: {
                    href: 'https://www.google.com.tw/',
                    target: '_blank',
                    content: 'Google'
                },
                input: {
                    type: "text"
                }
            }
        },
    });
</script>

执行後我们可以看到有个Google的link，店进去就会到google首页，打开控制台也可以看到我们绑定的属性都变成data中设定的样子。

接着我们打开vue devtools找到我们的input这个物件按编辑，就可以直接改变它的type，当我们改成checkbox、password可以看到画面上的框框也跟着改变。

绑定Class

Object Syntax

我们可以传给v-bind:class一个对象，以动态的方式切换class:

<div v-bind:class="{ active: isActive }"></div>

大括号中冒号前面是class name後面是状态(true/false)

完整版范例
我们设定了宽100px，高也100px的正方形区域，且让文字置中，并将active设定成底色为黄色，在data中我们可以看到isActive，active是否被绑定在class上取决於isActive，如果isActive为true，active就会被绑定，如果为false则不会。

<div id="app">
    <div v-bind:class="{active:isActive}" style="width: 100px;height: 100px;text-align: center;line-height: 100px;">
        Hello vue
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true
        },
    });
</script>
<style>
    .active {
        background-color: yellow;
    }
</style>

与普通class并用

v-bind:class 指令也可以与普通的 class attribute 共存，这个例子我们在前面加上一个class="test"，并将test设定字的尺寸为25px。

<div id="app">
    <div class="test" v-bind:class="{active:isActive}"
        style="width: 100px;height: 100px;text-align: center;line-height: 100px;">
        Hello vue
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true
        },
    });
</script>
<style>
    .test {
        font-size: 25px;
    }

    .active {
        background-color: yellow;
    }
</style>

绑定多个动态class

如果我们需要多个动态的class可以直接加在放面，也可以用阵列的形式。

<div id="app">
    <div class="test" v-bind:class="{active:isActive,brown:isBrown}"
        style="width: 100px;height: 100px;text-align: center;line-height: 100px;">
        Hello vue
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isBrown: true
        },
    });
</script>
<style>
    .test {
        font-size: 25px;
    }

    .active {
        background-color: yellow;
    }

    .brown {
        color: brown;
    }
</style>

数据型式

v-bind:class="{active:isActive,brown:isBrown}"

也可以用数据型式:

v-bind:class="[‘active’,’brown’ ]"

但在这里是用静态的方式加上这个class不是动态的。

三元运算

若想要用动态的方式加上class还可以用三元运算:

v-bind:class="[isActive? 'active':' ']"

这里我们用isActive来判断，若isActive是true我们的元素会绑定active样式，若isActive是false我们的元素会绑定一个空样式，isBrown也可以用一样的写法。

对了，提醒一下!如果觉得一直重复打v-bind很麻烦，它的缩写是:欧ヽ( ° ▽°)ノ

时间过得好快哦，怎麽一转眼就十月了(｡T ω T｡)