1.3 条件渲染、列表渲染

1. 条件渲染

1.1 条件渲染指令
1) v-if 与 v-else

2) v-show

1.2 比较 v-if 与 v-show
3) 如果需要频繁切换 v-show 较好

4) 当条件不成立时,v-if 的所有子节点不会解析(项目中使用)

div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: ‘#demo‘,
    data: {
      ok: true,
    }
  })
</script>

 2. 列表渲染

1) 列表显示指令

　　数组:v-for/index

　　对象:v-for/key

2) 列表的更新显示

　　 删除 item 替换 item

3) 列表的高级处理
　　列表过滤
　　列表排序

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {name:‘Cat‘, age: 16})">更新</button>
    </li>
  </ul>
  <button @click="addP({name: ‘xfzhang‘, age: 18})">添加</button>

  <h2>测试: v-for 遍历对象</h2>

  <ul>
    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li> <!--用的比较少-->
  </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // vue本身只是监视了persons的改变，没有监视数组内部数据的改变
  // vue重写了数组中的一系列改变数组内部数据的方法（先调用原生的，再更新界面） ———>数组内部数据改变，界面变化
  new Vue({
    el: ‘#demo‘,
    data: {
      persons: [
        {name: ‘Tom‘, age:18},
        {name: ‘Jack‘, age:17},
        {name: ‘Bob‘, age:19},
        {name: ‘Mary‘, age:16}
      ]
    },

    methods: {
      deleteP (index) {
        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法，这里的1表示删除1个元素
              // 1. 调用原生的数组的对应方法
              // 2. 更新界面
      },

      updateP (index, newP) {
        console.log(‘updateP‘, index, newP)
        // this.persons[index] = newP  // 并没有改变persons本身，数组内部发生了变化，但没有调用变异方法，vue不会更新界面（vue根本就不知道）
        this.persons.splice(index, 1, newP)
        // this.persons = [] //改变了persons本身
      },

      addP (newP) {
        this.persons.push(newP)
      }
    }
  })
</script>

原文地址：https://www.cnblogs.com/shiyun32/p/9611308.html