vue中的指令

各指令的demo：

<template>
  <div id="directive">
    <h2>v-text</h2>
    <p v-text="'modify world'">hello wprod</p>
    <h2>v-html</h2>
    <p v-html="'<span>hello</span>'">hello wprod</p>
    <h2>v-show</h2>
    <p v-show="show">是否展示</p>
    <button @click="show = !show">修改show</button>
    <p>v-if v-else</p>
    <p v-if="number === 1">number===1</p>
    <p v-else-if="number === 2">number ===2</p>
    <p v-else>其余的</p>
    <button @click="number = number + 1"></button>

    <p v-for="num in list" :key="num">{{ num }}</p>
    <input v-model="number" />
    <!-- number不使用data的值，直接输出{{number}} -->
    <p v-pre>{{ number }}</p>
    <!-- 只有第一次加载，以后的修改不影响该p中的内容了 -->
    <p v-once>{{ number }}</p>
  </div>
</template>
<script>
export default {
  name: "directive",
  data() {
    return {
      show: true,
      number: 1,
      list: [1, 2, 34],
    };
  },
};
</script>