if for 流程控制绑定

if：

if可用<templete>   不会显示该标签

<ul>

<li v-if="seen">hello girl</li>

<li v-else>hello boy</li>

</ul>

for：（4种）

<!-- 1. 数字数组 -->

<li v-for="item in item1">{{item}}</li>

<!-- 2. 字符数组 -->

<li v-for="item in item2">{{item}}</li>

<!-- 3. 对象数组 -->

<li v-for="item in item3">{{item.text}}</li>

<!-- 4. 对象 -->

<!-- v-for='a,b,c' 顺序分别为：

a: 值value（Rita）；

b: 键key（name）；

c: id（0）

-->

<li v-for="item in item4">{{item}}</li>

<!-- 或者 -->

<li v-for="(item,index) in item4">{{index}}.{{item}}</li>

<!-- 或者 -->

<li v-for="(item,index,value) in item4">{{item}}.{{index}}.{{value}}</li>

var vue = new Vue({

el: '#app',

data: {

seen: true,

// 1. 数字数组

item1: [1,2,3,4,5],

// 2. 字符数组

item2: ['字符1','字符2','字符3',],

// 3. 对象数组

item3: [

{text: '对象数组1'},

{text: '对象数组2'},

{text: '对象数组3'},

],

// 4. 对象

item4: {

name: 'Rita',

age: '12',

type: '对象'

}

}

})