条件渲染，列表渲染

条件渲染

v-if

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

  
  {{#if ok}}
  

  Yes

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

  Yes

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

  Yes

  
  

  No

v-else

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

  
  Now you see me
  
  
  
  
  Now you don't
  

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

v-else-if （2.1.0新增）

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

  
  A
  
  
  
  
  B
  
  
  
  
  C
  
  
  
  
  Not A/B/C
  

• 类似于v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后

用key管理可复用的元素

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