自学Vue(条件渲染、列表渲染、通过Key管理状态)

Vue条件渲染

v-if v-else v-show

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">You Look Me?</div>
  <div v-else>You Look Me!</div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
      result:'D',
    };
  },
};
</script>

当我们有多个条件的时候使用v-if因为他会有v-else进行条件的渲染情况。 但是当我们是单个条件渲染的时候推荐使用v-show，
1.因为v-show元素无论如何都会渲染，只有Css Display属性被切换，
2.而v-if有更高的切换开销，初始条件为false的时候不会做任何的事情，只有条件为true的时候才会渲染，条件区块内的监听器跟子组件都会销毁重建，然后负载高。

列表渲染

列表渲染主要是用v-for来进行实现遍历功能的，需要使用
item of items或者 item in items的语法形式来进行实现，其中items是源数据的数组，而item是别名。

<template>
  <h3>列表渲染</h3>
  <!--遍历基础的数据形式-->
  <div>
    <p v-for="(item, index) in names">{{ item }}-{{ index }}</p>
  </div>

  <h1>json列表渲染</h1>
  <!--遍历真实情况的数据-->
  <div v-for="results in result">
    <p>{{ results.title }}</p>
    <p>{{ results.id }}</p>
    <p>{{ results.name }}</p>
  </div>
  <!--遍历对象的形式-->
  <p v-for="(value,index,key) in nameInfo">{{ value }}-{{ index }}-{{ key }}</p>
</template>
<script>
export default {
  data() {
    return {
      names: ["高杨", "杨凯翔", "陈石军"],
      result: [
        {
          id: 1,
          name: "高杨",
          title: "高杨简介",
        },
        {
          id: 2,
          name: "石军",
          title: "石军简介",
        },
        {
          id: 3,
          name: "凯翔",
          title: "凯翔简介",
        },
      ],
      nameInfo: {
        name: "Tome",
        age: 28,
        sex: "男",
      },
    };
  },
};
</script>

Key属性

在真实的开发环境中最好是选用数据的ID
因为在数据库中ID是唯一的，这里绑定key属性的作用是：在数据发生变化的时候假如绑定了key属性他会自动的进行调换位置，而不是从新加载，减少了压力。
避免使用就地更新的策略而使用数据更换的情况