Vue（四）——模板渲染

模板渲染

Vue.js 提供v-if，v-show，v-else，v-for 这几个指令来说明模板和数据间的逻辑关 系，这基本就构成了模板引擎的主要部分。

• v-if、v-else

yes
 
no
 //如果app.yes == true则会输出yes反则输出no

• v-show
  与 v-if 不同的是，v-show 元素的使用会渲染并保持在 DOM 中。v-show 只是切换元素 的 css 属性 display。例如：

if
 
show
 //app.show 为false时，style='display:none;'

v-show有着更高的初始渲染消耗（因为可能要设置display），而v-if有着更高的切换消耗（当数据发生改变时需要进行更多的修改）

• v-for
  v-for 指令主要用于列表渲染，将根据接收到数组重复渲染 v-for 绑定到的 DOM 元素及内部的子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。
  v-for内置了索引变量$index，我们也可以自己指定索引的别名，例如：

 　 

 　　  
{{item.title}}-{{index}}-{{$index}}
 　　  
{{item.description}}
 　 
 
 

var app = new Vue({
 　 el : '#app',
 　 data: {
 　　 items : [
 　　　  { title: 'title-1', description: 'description-1'},
 　　　  { title: 'title-2', description: 'description-2'},
 　　　  { title: 'title-3', description: 'description-3'},
 　　　  { title: 'title-4', description: 'description-4'}
 　　 ]
 　 }
 })

结果为：

 　 

 　　  
title-1-0-0
 　　  
description-1
 　 
	

 　　  
title-2-1-1
 　　  
description-2
 　 
	

 　　  
title-3-2-2
　　  
description-3
 　 
	

 　　  
title-4-3-3
 　　  
description-4
 　 
 

需要注意的是，使用数组的索引来修改数组元素是不会触发视图更新的，如app.items[0] = { title: 'title-change'}，但是我们可以使用$set方法，可以写成：

app.items.$set(0, { title: 'title-change' })
或者
app.$set('items[0]', { title: 'title-change' })

通过使用trace-by可以给数组设定唯一的标识，Vue.js 在渲染过程中会尽量复用原有对象的作用域及 DOM 元素，会提高渲染时的效率。
除了遍历数组之外，v-for还可以遍历对象（使用(key, value) in objects，内置索引为$key），还可以遍历整数（v-for=‘n in 5’，代表遍历五次）

• template标签
  通过使用tamplate标签我们可以方便的遍历多个的兄弟节点，而在最后的渲染结果中不会出现它：

或者