3、指令（v-if与v-for的区别、各种指令的使用）

<template>
  <div id="app">
    <!-- 1、绑定文本 -->
    <div class="case case1">
      <p>1、{{}}:绑定文本</p>
      <h1>{{ message }}</h1>
    </div>
    <!-- 2、绑定事件 -->
    <div class="case case2">
      <p>2、@click:绑定事件</p>
      <button @click="sayHi">按钮</button>
    </div>
    <!-- 4、v-if:控制元素显示/隐藏（没有元素，不渲染dom） -->
    <div class="case case4">
      <p>4、v-if:控制元素显示/隐藏</p>
      <h1 v-if="true">{{ message }}</h1>
      <h1 v-if="false">{{ message }}</h1>
    </div>
    <!-- 5、v-show:控制元素显示/隐藏（有元素，渲染dom，display:none） -->
    <div class="case case5">
      <p>5、v-show:控制元素显示/隐藏</p>
      <h1 v-show="true">{{ message }}</h1>
      <h1 v-show="false">{{ message }}</h1>
    </div>
    <!-- 6、v-for:显示列表 -->
    <div class="case case6">
      <p>6、v-for:显示列表</p>
      <ul>
        <li v-for="(number, index) of numList" :key="index">
          <p>{{ number }}</p>
        </li>
      </ul>
    </div>
    <!-- 7、v-for：显示表格 -->
    <div class="case case7">
      <p>7、v-for：显示表格</p>
      <table border="1px">
        <thead>
          <th>序号</th>
          <th>用户名</th>
          <th>年龄</th>
        </thead>
        <tbody>
          <tr v-for="(value, index) of userList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ value.name }}</td>
            <td>{{ value.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
// 暴露接口，可以被其他模块调用;
export default {
  // 1、数据要用函数返回
  data() {
    return {
      message: "Hello world!",
      numList: [1, 2, 3],
      userList: [
        { name: "jasmine", age: 14 },
        { name: "qiqi", age: 13 },
        { name: "jasmine_qiqi", age: 32 },
      ],
    };
  },
  // 2、函数在方法中定义
  methods: {
    sayHi() {
      alert("Hello world!");
    },
  },
};
</script>
<style>
#app {
  /* 二维布局 */
  display: grid;
  /* 列 */
  grid-template-columns: 25% 25% 25% 25%;
  /* 行 */
  grid-template-rows: 50% 50%;
}
img {
  width: 200px;
  height: 100px;
}
</style>