条件渲染

• v-if
• v-else
• v-else-if
• v-show

**v-if和v-show的区别：
v-if是真实条件渲染，它是惰性的，区块内的监听器和子组件都会被销毁重建
只有首次条件为true的时候，它才会被渲染

v-show就简单很多无论初始条件如何，都会被初次渲染，只有css的属性在切换
v-if有更高的切换开销，而v-show有更高的初始渲染开销

如果要频繁切换，v-show更好，如果运行时条件很少改变，v-if更好

循环渲染

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>
</template>

<script>
export default {
  data() {
    return {
      names: ["a", "b", "c"],
    };
  },
};
</script>

非常简单，显而易见

**复杂数据
大多数情况都是用json

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>

  <div v-for="i in r">
    <p>{{ i.name }}</p>
    <img :src="i.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["a", "b", "c"],

      r: [
        { id: 1, name: "a", age: 10 },
        { id: 2, name: "b", age: 12 },
        { id: 3, name: "c", age: 13 },
      ],
    };
  },
};
</script>

(item,index) in items
v-for也支持使用第二个参数，表示当前项的位置索引，需要注意的是，从0开始！

in 可以用 of替代，这样更加符合js的迭代器语法

你可以使用v-for来遍历一个对象的所有属性

(item,index) in items

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>

  <div v-for="i in r">
    <p>{{ i.name }}</p>
    <img :src="i.age" />
  </div>
  <hr />
  <div>
    <p v-for="(value, key, index) in userInfo">
      {{ value }}-{{ key }}-{{ index }}
      <hr>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["a", "b", "c"],

      r: [
        { id: 1, name: "a", age: 10 },
        { id: 2, name: "b", age: 12 },
        { id: 3, name: "c", age: 13 },
      ],

      userInfo: {
        name: "alpha",
        age: 18,
        sex: "男"
      },
    };
  },
};
</script>

通过key管理状态

vue默认按照就地更新的策略更新通过v-for渲染的列表
所以数据的顺序改变的时候，vue不会更新顺序，而是就地更新，确保在原本的位置上进行渲染

<p v-for="(item,index) in names" :key="index">{{ item }}</p>

也就是，这样排序或者更换位置，不需要重新渲染，而是直接更换位置

跟一个key，设置成索引