1-8 计算属性与表单

计算属性

computed:和methods是同级关系，是个对象，可以放好多方法。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

其实同样的结果，用methods里面定义方法同样也可以实现。但是为什么要用计算属性呢
methods和computed的区别：

methods：每次都会重新执行。
computed： 只有数据发生改变的时候才执行，数据不变，直接依赖缓存取得数据。

表单输入绑定

表单例子都可处理，详情见Vue官网
v-model：表单数据双向绑定
特性：可读也可写
以下的例子你会发现，文本框输入什么那么页面的就展示什么，这就是所谓的数据双向绑定

<input type="text"  v-model=“msg” >
{{msg}}

data(){
return{
msg:’’

}
}

数据监听方法：
这个对象里面的方法，全部都是实时监听的。
watch:{
msg:function(data){ //这里的msg代表data里的msg，data代表你输入的数据
console.log(data)
}

}

修饰符

失去焦点的时候才处理

<input v-model.lazy="msg" >

只对数字类型处理

<input v-model.number="msg" >

自动过滤用户输入的首尾空白字符

<input v-model.trim="msg" >