Vue.js 条件与循环&计算属性&监听属性

条件判断

v-if

条件判断使用 v-if 指令：

参考上一篇博客 看第二点指令那块

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

    
A
    
B
    
C
    
not A/B/C

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

运行结果：

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

    

      

        {{site.name}}
      
    

Vue.js 计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

下面的实例中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

    
原始字符串：{{message}}
    
计算后反转的字符串：{{reversedMessage}}

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行，可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。

Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。