10-0 js

<script>
const App = {
  data() {
    return {
      name: '小明',
      isFull: true,
      link: '小明',
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        {
          name: '小籠包',
          price: 60,
          vegan: false
        }
      ]
    }
  },
  methods: {
    // 切換資料方法
    change: function (key) {
      this[key] = !this[key];
    },
  },
};

Vue.createApp(App).mount('#app');
</script>

10-1 v-if 使用方式

  <!-- 只設定v-if為true時會顯示，為false時移除節點 -->
  <p v-if="isFull">小明 飽了</p>
  <p v-else>小明 還沒吃飽</p>
  {{ isFull }}
  <button type="button" v-on:click="change('isFull')">狀態切換</button>

10-2 v-else-if 使用方式

  <nav class="nav nav-pills nav-fill">
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '小明' }"
      v-on:click="link = '小明'">小明</a>
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '小美' }"
      v-on:click="link = '小美'">小美</a>
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '杰倫' }"
      v-on:click="link = '杰倫'">杰倫</a>
  </nav>
  <div>
    {{link}}
    <div v-if="link === '小明'">小明吃早餐</div>
    <div v-else-if="link === '小美'">小美去百貨公司</div>
    <div v-else-if="link === '杰倫'">杰倫去幫助人</div>
  </div>

10-3 v-for 與 v-if 混用

    <!-- 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请查看风格指南获得更多信息。 -->
    <!-- 解決混用問題，使用template -->
  <ul>
    <template  v-for="(item, key) in products" v-bind:key="item.name">
      <li v-if="item.price >=35">
        {{ item.name}} / {{ item.price }} 元
      </li>
    </template>
  </ul>

10-4 v-if 與 v-show 差異

  <!-- v-show會隱藏節點，v-if會移除節點 -->
  <p v-show="isFull">小明 飽了</p>
  <button type="button" v-on:click="change('isFull')">狀態切換</button>

知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~