<ul id="app">
<li v-for="item in list">{{item}}</li>
</ul>
/var data = [
'快乐大本营',
'奔跑吧兄弟',
'极限挑战'
]var app = new Vue({
el: '#app',
data: {
list: data
}
})
与v-if一样v-for也可以应用在template元素上，此时可以实现对多组元素的for循环
Eg:
<ul id="app">
<template v-for="item in list">
<li>
<span v-if="item.type">{{item.type}} | </span>
<strong>{{item.title}}</strong>
</li>
<br>
</template>
</ul>
var data = [
{
type: '湖南',
title: '快乐大本营'
},
{
type: '浙江',
title: '奔跑吧兄弟'
},
{
type: '东方',
title: '极限挑战'
}
]var app = new Vue({
el: '#app',
data: {
list: data
}
})3:v-show指令
v-show也是条件渲染指令，控制元素显隐，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
V-if是false会将元素在dom文档中删除
V-show是false是将元素的display设置none
V-if会删除元素，v-show只是做样式显隐，会保留页面中
4:v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else渲染到HTML。
5:v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：
v-bind:class=”''
v-bind:argument="expression"6:v-on指令
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">语法：V-on:click=“事件回调函数的名称”
定义事件的回调函数，在vue的实例化对象的methods属性中定义
Methods他的值是一个对象
对象是属性名称表示事件的回调函数名称
对象的属性值是一个函数，就是事件的回调函数
他的this指向的是vue实例化对象，因此通过它我们可以获取或者设置vue实例化对象上属性
它默认有个参数是事件对象，这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象
当我们在使用事件时候，可以传递一些参数，此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的
