Vue入门指南（4）

双向数据绑定

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

数据双向绑定 input / select /  textarea

        姓名:
        
        {{ name }}

TIM图片20180125122227.png

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

数据双向绑定 input / select /  textarea

        年龄:
        
        {{ age }}

TIM图片20180125124158.png

计算属性

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

Computed 计算属性

        add a
        add b
        
a - {{ a }}
        
b - {{ b }}
        
20 + {{ a }} = {{ addToA() }}
        
20 + {{ b }} = {{ addToB() }}

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

TIM图片20180125130821.png

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

Computed 计算属性

        add a
        add b
        
a - {{ a }}
        
b - {{ b }}
        
20 + {{ a }} = {{ addToA }}
        
20 + {{ b }} = {{ addToB }}

TIM图片20180125132306.png

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

动态css class

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

        
示例1

TIM图片20180125154513.jpg

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

        chengeColor
        

            Mary
        

TIM图片20180125161205.jpg

TIM图片20180125161152.jpg

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