条件渲染，列表渲染

条件渲染

v-if

• 在字符串模板中，比如 Handlebars，我们得像这样写一个条件块：

    <!-- Handlebars 模板 -->
    {{#if ok}}
      <h1>Yes</h1>
    {{/if}}
  

• 在 Vue 中，我们使用 v-if 指令实现同样的功能：

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

• 也可以用 v-else 添加一个“else 块”：

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

v-else

• 使用v-else指令来表示v-if的else块：

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

• v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别

v-else-if （2.1.0新增）

• 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-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后

用key管理可复用的元素

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

v-show指令

• v-show不支持<template>元素，也不支持v-else

列表渲染

用v-for把一个数组对应为一组元素

• 我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名

数组更新检测

变异方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组

• filter()
• concat()
• slice()
• 这些不会改变原始数组，但总是返回一个新数组

对象更改检测注意事项

• 由于JavaScript的限制，vue不能检测对象属性的添加和删除
• 使用Vue.set(object,key,value)方法向嵌套对象添加响应式属性
• 需要为已有对象赋值多个新属性Object.assign()或_.extend()