v-if 与 v-else

想控制某一个元素或者区域显示与否，可以使用v-if。其绑定的属性只要最后能被解析为true或者false即可。

<div id="app">
    <p v-if="disp">My name is {{ persons[0] }}</p>
    <button @click="disp=!disp">Switch</button>
</div>

还可以使用v-else，与最近的v-if进行配对：

<div id="app">
    <p v-if="disp">My name is {{ persons[0] }}</p>
    <p v-else>My name is {{ persons[1] }}</p>

    <button @click="disp=!disp">Switch</button>
</div>

v-else只需要单独使用即可，无需绑定属性。这里还需要注意的是，v-if和v-else控制的元素，在条件不满足的情况下，对应元素是直接从DOM树中去除的。 2.10版中新增加了v-else-if，作为自动的与上一个if关联然后启动下一个else，方便进行控制，具体看这里

v-show

v-show也需要绑定解析为true或者false的属性，与v-if和v-else不同的是，被控制的元素不会从DOM中去除，只是更改样式display:none，通过浏览器的调试窗口可以很容易发现。

<div id="app">
    <p v-if="disp">My name is {{ persons[0] }}</p>
    <p v-else>My name is {{ persons[1] }}</p>
    <p v-show="disp">My name is {{ persons[2] }}</p>

    <button @click="disp=!disp">Switch</button>
</div>

template元素

想要控制一片元素显示与否，可以将v-if加在最外层的元素上。可能首先会想到div，但是div有副作用就是会进入DOM树。Vue提供了一个template标签，可以用于控制一片区域，而且这个标签就像完全不存在一样。

    <template v-if="disp">
        <p>My name is {{ persons[0] }}</p>
        <p>My name is {{ persons[1] }}</p>
        <p>My name is {{ persons[2] }}</p>
    </template>
    <button @click="disp=!disp">Switch</button>

通过浏览器查看元素可以发现template中的元素会像没有外层元素一样，整体受变量的控制。

v-for 循环

在Web页面中经典的控制就是循环，v-for中的JS语句就和JS语句一样，是按照value，key，index的顺序排列的。

<div id="app">
    <ol>
        <li v-for="person in details">{{person.name}} | {{person.age}} | {{person.hobby}}</li>
    </ol>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            disp:true,
            persons: ["jenny", "minko", "cony"],
            details: [{
                name: "jenny",
                age: 18,
                hobby: "shopping"
            }, {
                name: "minko",
                age: 37,
                hobby: "programming"
            }, {
                name: "cony",
                age: 5,
                hobby: "piano"
            }
            ]
        },
        methods:{

        }
    });
</script>

v-for 循环显示键名和索引

刚才遍历了所有对象显示了其中的各个属性的值，如果要将对象的键名和索引也一并显示，就可以在v-for中同时指定这些临时变量：

<div id="app">
    <ol>
        <li v-for="person in details"><span v-for="(value,key) in person"> {{key}}:{{value}} </span></li>
    </ol>
</div>

嵌套循环，先指定临时变量person作为遍历details列表的每个对象，然后从每个对象中取出这个对象的键值。还可以取出索引，比如给列表中取得的元素增加序号：

<div id="app">
    <ul>
        <li v-for="(person,index) in persons">{{index+1}} : {{person}}</li>
    </ul>
</div>

一定要注意传入的参数的次序。还可以在嵌套循环中使用：

<div id="app">
<ul>
    <li v-for="person in details">
        <span v-for="(value,key,index) in person">{{key}} ：{{value}} -- {{index}} </span>
    </li>
</ul>
</div>

一般两层循环也足够了，一定要注意传入的变量名称和顺序。其中临时变量名可以自定义，value,key,index一定要按照预定义的名称。

v-for 动态绑定

v-for也是与属性动态绑定的，如果修改其中的元素，则v-for的显示会跟着发生变化：

<div id="app">
<button @click="persons.push('saner')">Add an item</button>
<button @click="persons.pop()">Pop an item</button>
<ol>
    <li v-for="person in persons">
        {{person}}
    </li>
</ol>
</div>

每次点击按钮，都可以看到显示发生变化

简易生成数字序列

对于要生成一些简易的数字序列，可以直接用简易语法：

<p v-for="x in 10">{{x}}</p>

这会显示10个P元素，其中的内容是1-10，注意和index不同，不是0-9。

key元素鉴别独立性

有的时候经常发生元素的内容没有改变的情况，就不会重新渲染，还有可能发生在数组长度有所改变，为了避免复用相同的元素，可以给一个元素指定一个key属性，只要这个属性唯一，就不会重复使用。这在遍历数组的时候经常使用，一般常见的做法是将key设置为数据对象的id或者是数组的索引，或者就是数据对象本身，设置如下：

<ol>
    <li v-for="person in persons" key="person">
        {{person}}
    </li>
</ol>

这样就保证了每次数组有变化的时候，会重新检测唯一性，然后重新渲染，不会出现增删元素导致的错误。在从数据库中取得元素并展示，或者进行POST的时候，非常重要。

总结

流程控制和展示列表的指令很少，核心就是v-if和v-for两个语句，然后再逐层遍历。这里要注意的就是v-for经常与key搭配使用保证元素不重用，这在从后端获取数据的时候非常重要。