條件渲染，列表渲染

條件渲染

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