一、前言

条件渲染和列表渲染其实就是使用vue的v-if和v-for两个指令来控制是否渲染和循环渲染的逻辑。

二、条件渲染

条件渲染使用vue的逻辑绑定指令来实现分支结构，来决定渲染哪一个dom或哪一个组件。

<div id = "app">
  <div v-if = "status1">1</div>
  <div v-else-if = "status2">2</div>
  <div v-else = "status3">3</div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    status1: false,
    status2: true,
    status3: false
  }
});
</script>

生成的dom为：

<div>3</div>

条件渲染中的元素是可复用的，分支中相同的标签或组件会在分支切换过程中被保留。

<div id = "app">
  <template v-if = "status">
    <label for = "username">username:</label>
    <input id = "username" type = "text" />
  </template>
  <template v-else>
    <label for = "email">email:</label>
    <input id = "email" type = "text" />
  </template>
  <button @click="toggleStatus">toggle</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    status: true
  },
  methods: {
    toggleStatus: function(){
      this.status = !this.status;
    }
  }
});
</script>

可以看到，上面的分支中都存在label，input元素。而且顺序都是label->input，这样label和input元素会复用，并不会涉及dom的remove和append。只是更改它的属性和文本值。

提示：如果不需要复用，那么在不需要复用的标签上添加唯一的key
补充：v-show也可以进行元素的切换，不过只是简单的css切换。
v-if有较大的切换开销，v-show有较大的初始渲染开销

三、列表渲染

列表渲染就是使用vue的v-for指令渲染与数组、对象有关的多条信息，用dom展示出来。

<div id = "app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        items: ['apple', 'pear', 'banana']
    }
});
</script>

渲染的dom为：

<ul>
  <li>apple</li>
  <li>pear</li>
  <li>banana</li>
</ul>

提示：对象渲染也是使用for-in。
补充：数组可以使用(item, index) in items遍历时得到元素和下标
对象可以使用(key, value, index) in items遍历得到键、值、下标
注意：在使用v-for时，尽量使用key（需要使用v-bind绑定，这里不同v-if）
特殊：v-for="n in 10"可以渲染1到10的值，v-for的优先级大于v-if