vue学习笔记（三）双向数据绑定，computed计算属性，动态

数据绑定

<div id="app">
        <input type="text" v-model="name" >
        <span>{{name}}</span>
</div>

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

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

computed计算属性

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

区别：

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

<div id="app">
    <p>methods需要加()--{{fn()}}</p>
    <p>computed不需要()--{{fn}}</p>
</div>

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

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

动态绑定css

点击查看

v-if

<div v-if='条件1'>如果满足条件1执行</div>
<div v-else-if='条件2'>如果满足条件2执行</div>
<div v-else>以上条件都不满足执行</div>

v-for

<div v-for="(value, key, index) in 对象名或者数组名">
  {{ index }}. {{ key }}: {{ value }}
</div>