vue学习笔记(三)双向数据绑定,computed计算属性,动态

2019-04-14  本文已影响0人  帝王弦

数据绑定

<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>
上一篇 下一篇

猜你喜欢

热点阅读