条件渲染，列表渲染

条件渲染

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()