vue学习笔记（三）双向数据绑定，computed计算属性，动态绑定css，v-if,v-for

数据绑定

        
        {{name}}

new Vue({
    el: "#app",
    data() {
        return {
          name:true 
        }
    }
});

通过添加v-model进行双重数据绑定

computed计算属性

methods方法：一旦某个方法执行，所有方法都会全部执行

区别：

写法上：computed计算属性在用属性时不用加(),而methods在使用时必须加()

    
methods需要加()--{{fn()}}
    
computed不需要()--{{fn}}

缓存上：computed 计算属性缓存依赖于数据模型中的属性(data中数据)，如果模型中的属性不改变它的缓存就不改变，如果数据模型中的属性发生改变则再计算一遍
method方法不管你数据模型中的属性是否改变都有执行

computed 的作用主要是对原数据进行改造输出。
改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号等。

动态绑定css

点击查看

v-if

如果满足条件1执行
如果满足条件2执行
以上条件都不满足执行

v-for

  {{ index }}. {{ key }}: {{ value }}