iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0

根據表達式的真假來決定是否渲染或顯示特定內容
要控制元素的顯示隱藏或狀態改變、頁面上迭代數組或對象數據,我們來看看如何使用v-if、v-else、v-for來實現

<template>
  <div>
    <div class="header">
      <div class="open">
        <span
          v-if="!isCollapse"
          class="iconfont el-icon-arrow-left"
          @click="changeMenu"
        ></span>
        <span
          v-else
          class="iconfont el-icon-arrow-right"
          @click="changeMenu"
        ></span>
      </div>
    </div>
  </div>
</template>

在上面範例中,v-if和v-else用於切換一個元素的內容,根據isCollapse變量的值來決定顯示不同的圖標。


上一篇
Vue.js的實體物件
下一篇
JS原型繼承與原型鏈
系列文
菜鳥前端4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言