溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例

發(fā)布時(shí)間：2020-10-19 10:18:53 來(lái)源：腳本之家 閱讀：365 作者：daisy 欄目：web開(kāi)發(fā)

本文主要給大家介紹的是關(guān)于Vue.js在元素與template中使用v-if指令的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：

語(yǔ)法比較簡(jiǎn)單，直接上代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="wangtuizhijiademo">
 <p v-if="instruction">在Vue.js中，當(dāng)判斷語(yǔ)句為true,可以顯示信息，當(dāng)為false時(shí)候不顯示</p>
 <template v-if="show1">
  <p>我是 show1，默認(rèn)是開(kāi)啟的（true），當(dāng)你設(shè)置false我不顯示！</p>
 </template>
 <template v-if="show2">
  <p>我是 show2，默認(rèn)是關(guān)閉的，當(dāng)你設(shè)置show2的值為true，我會(huì)被顯示！</p>
 </template>
</div>

<script>
 new Vue({
  el: '#wangtuizhijiademo',
  data: {
   instruction:true,
   show1: true,
   show2: false
  }
 })
</script>
</body>
</html>

true為開(kāi)啟狀態(tài)，false為關(guān)閉狀態(tài)。

Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例

有興趣的可以試試把 show2: false的false改為true，可以看到兩條信息，如下：

在Vue.js中，當(dāng)判斷語(yǔ)句為true,可以顯示信息，當(dāng)為false時(shí)候不顯示

我是 show1，默認(rèn)是開(kāi)啟的（true），當(dāng)你設(shè)置false我不顯示！

我是 show2，默認(rèn)是關(guān)閉的，當(dāng)你設(shè)置show2的值為true，我會(huì)被顯示！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手