Vue入门指南（4）

双向数据绑定

一般双向数据绑定存在于input / select / textarea，因为它既要有输入数据的地方，也要有输出数据的地方。现在我们希望在input里输入姓名，在span里可以即时的显示我们输入的内容，我们就需要拿到input的value值，这时我们要用到ref：

<h1>数据双向绑定 input / select /  textarea</h1>
<div id="vue-app">
        <label>姓名:</label>
        <input  ref="name" type="text" v-on:keyup="logName">
        <span>{{ name }}</span>
</div>
<script src="vue.js"></script>
<script>
        new Vue({
            el: "#vue-app",
            data: {
                name: ""
            },
            methods: {
                logName: function(){
                    this.name = this.$refs.name.value;
                }
            }
        })
</script>

现在就可以即时的获取input中的值。其实在vue中有一个指令同样可做到，并且更加简单，就是v-model

<h1>数据双向绑定 input / select /  textarea</h1>
<div id="vue-app">
        <label>年龄:</label>
        <input type="text" v-model="age">
        <span>{{ age }}</span>
</div>
<script src="vue.js"></script>
<script>
        new Vue({
            el: "#vue-app",
            data: {
                age: ""
            }
        })
</script>

计算属性

如果我们想计算简单的加法，完全可以写一个方法

<h1>Computed 计算属性</h1>
<div id="vue-app">
        <button v-on:click="a++">add a</button>
        <button v-on:click="b++">add b</button>
        <p>a - {{ a }}</p>
        <p>b - {{ b }}</p>
        <p>20 + {{ a }} = {{ addToA() }}</p>
        <p>20 + {{ b }} = {{ addToB() }}</p>
</div>
<script src="vue.js"></script>
<script>
        new Vue({
            el: "#vue-app",
            data: {
                a: 0,
                b: 0
            },
            methods: {
                addToA: function(){
                    console.log ("aaaa");
                    return this.a + 20;
                },
                addToB: function(){
                    console.log ("bbbb");
                    return this.b + 20;
                }
            }
        })
</script>

打开控制台，我们点击一下按钮看看会发生什么

会发现我们只点击了一下add b，但是两个方法都被执行了，这样的话很耗费性能。如果我们使用computed属性会不会这样呢？我们来试一下

<h1>Computed 计算属性</h1>
<div id="vue-app">
        <button v-on:click="a++">add a</button>
        <button v-on:click="b++">add b</button>
        <p>a - {{ a }}</p>
        <p>b - {{ b }}</p>
        <p>20 + {{ a }} = {{ addToA }}</p>
        <p>20 + {{ b }} = {{ addToB }}</p>
</div>
<script src="vue.js"></script>
<script>
        new Vue({
            el: "#vue-app",
            data: {
                a: 0,
                b: 0
            },
            computed: {
                addToA: function(){
                    console.log ("aaaa");
                    return this.a + 20;
                },
                addToB: function(){
                    console.log ("bbbb");
                    return this.b + 20;
                }
            }
        })
</script>

此时点击一下add a就只会执行addToA，需要注意的是，既然computed是属性，那么在调用时就不需要写（）。

动态css class

绑定class，我们需要用到v-bind

<div id="vue-app">
        <div v-bind:class="{red:true}">示例1</div>
</div>

这时候div就有了class，也可以绑定多个class，但是这并不是动态的，接下来，我们看看如何动态的绑定class

<style>
       span {
            background: rgb(216, 101, 35);
            color: #fff;
            display: inline-block;
            padding: 20px;
            margin: 20px 0;
        }
        .changeColor span {
            background: teal;
        }
</style>

<div id="vue-app">
        <button v-on:click="changeColor=!changeColor">chengeColor</button>
        <div v-bind:class="compClass">
            <span>Mary</span>
        </div>
</div>

<script src="vue.js"></script>
<script>
        new Vue({
            el: '#vue-app',
            data: {
                changeColor: false
            },
            computed: {
                compClass:function(){
                    return  {
                        changeColor : this.changeColor
                    }
                }
            }

        });
</script>

在这个例子中，我们每点击一下changeColor按钮，div的class都会发生相应的变化。