vue渲染

1.条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：

v-if

v-if可以控制元素的创建或者销毁

<h1 v-if="ok">Yes</h1>

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：

<h1 v-show="ok">Hello!</h1>

2.列表渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

遍历数组

<ul id="example-1">
  <li v-for="item in items">
    {{ item}}
  </li>
</ul>

vue对象创建如下：

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: ['foo','bar']
  }
})

如果想加上索引值，可以加上第二个参数

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

遍历对象

也可以用 v-for 通过一个对象的属性来迭代

<ul id="v-for-object">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

如果想加上对象属性名，可以加上第二个参数

<ul id="v-for-object">
  <li v-for="(value,key) in object">
    {{ key }}-{{ value }}
  </li>
</ul>