条件渲染
条件渲染，就满足一定的条件以后才会渲染。
v-if
v-if指令类似于，js中的if语句，当条件满足时才会执行
v-if //ok的值为true，span标签才会被渲染
//同时渲染多个元素
Title
Paragraph 1
Paragraph 2
var vm = new Vue({
el: '#app',
data: {
ok: true,
no: true,
type: 'c',
toggle: true
}
});
v-else
v-else指令，类似于js中的else语句，当v-if条件不成立是，v-else就会渲染。
v-if
v-else //当ok 的值为false，是渲染
v-else必须紧跟着在v-if或者v-else-if的到后面，否则不会被识别。
v-else-if
是2.1.0新增加的指令，类似于js中的else if，可以链式使用多次。
a
b
not a and b
v-else-if必须紧跟着在v-if或者v-else-if的到后面，否则不会被识别。
用key管理可复用的元素
vue会尽可能的高效的渲染元素，通常会复用已有元素而不会从头渲染
上面例子因为两个p标签用用了相同的元素，不会被替换掉，仅仅是替换了他的placeholder。
当我们不想复用他们时，只要加上唯一的key属性
注意,
v-show
v-show与v-if的用法几乎一致
v-show
v-show VS v-if
-
v-show不支持语法，也不支持v-else。 -
v-if是真正的条件渲染，因为他确保在切换过程中条件块内部的事件监听器和子组件适当的被销毁和重建 -
v-if也是惰性的，如果在处事渲染时条件为假，则什么也不做，直到条件为真时，才开始渲染条件块 -
v-show就简单的多，不管条件是啥总会被渲染，并且只是简单的基于css的切换 - 一般需要频繁的切换就是用
v-show，运行条件不太会改变则使用v-if - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级
列表渲染
v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。基本用法如下：
var vm = new Vue({
el: '#app',
data: {
items: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'}
]
}
});
v-for 还支持可选的第二个参数为当前项的索引
利用template标签同时渲染多个标签
- {{index}}
- {{val.text}}
对象的迭代，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的
{{key}}
{{key}}: {{value}}
{{key}}: {{value}}: {{index}}
当迭代渲染遇上组件
- {{i.text}}
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。
建议尽可能使用v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。用法跟前面一样。
数组的更新检查
Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
这些方法都会改变原数组，也有一些方法是返回一个新数组，不会改变原数组。例如： filter(), concat(), slice() 。当使用非变异方法时，可以用新数组替换旧数组。
注意事项
由于 JavaScript 的限制， Vue 不能检测以下变动的数组： - 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
解决方法：
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)
数据过滤
我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。
奇数：{{i}}
偶数：{{i}}
var vm = new Vue({
el: '#app',
data: {
number: [1,2,3,4,5,6]
},
computed: {
odd: function(){
return this.number.filter(function(i){
return i%2 === 1;
})
}
},
methods: {
even: function(arr){
return arr.filter(function(i){
return i%2 === 0;
})
}
}
});
官方API
Vue