vue入门——条件和列表渲染

条件渲染

  v-if 指令，很容器理解就是一个条件判断，当条件成立时渲染；另外，还能够使用 v-else-if 和 v-else ，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div id="app">
    <input v-model="type">
    <p v-if="type === 'A'">A</p>
    <p v-else-if="type === 'B'">B</p>
    <p v-else>C</p>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            type: 'A'
        }
    })
</script>

  根据上边的例子，v-if 主要就是决定元素的显示和隐藏；还有另外一个相同作用的指令 v-show ，他们的区别在于，v-show 解析之后，相当于在元素上添加了 display:none 的样式，而 v-if 则是该部分的元素不会渲染，也就是说，审查元素时看不到该部分的元素。

  如果需要频繁切换，使用 v-show 会更好，因为 v-if 每次条件成立时，会重新渲染。

列表渲染

  v-for 渲染数组数据，使用 item in items 的语法，遍历数组。

<div id="app">
    <select>
        <option v-for="option in options" :label="option.label" :value="option.value"></option>
    </select>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            options: [
                {label: '男', value: 1},
                {label: '女', value: 2}
            ]
        }
    })
</script>

  另外，在循环中，我们还能够使用 (item, index) in items ，index 是数组中的索引；除了遍历数组外，还能够遍历对象 (value, key) in items

<div id="app">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="p.id">
            {{index}}--{{p.name}}--{{p.age}}
            --
            <button @click="deleteItem(index)">删除</button>
            --
            <button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
        </li>
    </ul>
    <h2>测试: v-for 遍历对象</h2>
    <ul>
        <li v-for="(value, key) in persons[0]">
            {{ key }} : {{ value }}
        </li>
    </ul>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            persons: [
                {id: 1, name: 'tom', age: 15},
                {id: 2, name: 'jerry', age: 16},
                {id: 3, name: 'bob', age: 17},
            ]
        }
    })
</script>

  Vue 官方文档建议，在使用 v-for 时，为每个元素指定一个唯一的 key 值。通常，我们使用数组的 index 作为 key 值，但是，其实并不推荐这么做。

使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；

数组检测更新

  Vue 的双向绑定，是监测到数据变化之后，做出对应的响应事件；Vue 包含一组观察数组的变异方法（改变原始数组的方法），主要如下：

• push()： 数组中添加元素到最后
• pop() ： 移除最后一个元素
• shift()： 移除第一个元素
• unshift()： 添加元素到数组开头
• splice()： 移除指定位置的元素， splice(index, 1)
• sort(): 排序
• reverse()： 翻转

  除了改变原始数组，有些方法，会返回一个新数组，例如：filter()，concat() （拼接数组），slice() （提取字符串），vue 也能够监听到数组的变化。

注意 Vue 无法检测到一下数组的变化：

1. 使用索引设置数组的值 vm.items[indexOfItem] = newValue
2. 修改数组长度 vm.items.length = newLength

解决办法：

• 问题一：
  • Vue.set(vm.items, indexOfItem, newValue)
  • vm.items.splice(indexOfItem, 1, newValue)
  • 使用 vm.$set 实例方法（全局方法 Vue.set 的别名） vm.$set(vm.items, indexOfItem, newValue)
• 问题二：
  • vm.items.splice(newLength)

对象检测注意事项

  除了数组的变化，有些检测不到之外，Vue 不能检测对象属性的添加或删除

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

// `vm.b` 不是响应式的
vm.b = 2

解决办法：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

使用 Vue.set :

• Vue.set(vm.userProfile, ‘age’, 17)
• vm.$set(vm.userProfile, ‘age’, 17)

如果需要设置多个属性， 可以使用 Object.assign (对象的拷贝)，但是应该将两个对象的属性创建一个新的对象

// 反例
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
// 正确做法
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

其他

1. v-for 除了能够遍历 data，还可以是 method 中的一个方法；
2. v-for 和 v-if 还能够作用在 template 上；
3. v-for 和 v-if 同时使用时，v-for 优先级更高；但一般不推荐同时使用。