您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“如何使用vue控制元素顯示隱藏”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“如何使用vue控制元素顯示隱藏”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
HTML代碼:
<div title="意向價格" v-if="showPrise"></div> <div title="意向租金" v-show="showRentPrise"></div>
JS代碼:
new Vue({ el: '#app', data: { showPrise:false, showRentPrise:false } methods: { changeStatus(){ if("你設(shè)置的條件"){ this.showPrise = true; this.showRentPrise = true; } } } })
默認(rèn)showPrise和showRentPrise的狀態(tài)是false,所以是隱藏的。
當(dāng)你在changeStatus通過了某種條件,你就可以控制showPrise和showRentPrise的狀態(tài)了。true為顯示,false為隱藏。
v-if控制 DOM的刪除和添加,不同于v-show對DOM的顯示和隱藏
一.v-show
控制元素顯示, 通過display: none控制顯示
語法: v-show=“變量或者表達(dá)式”
如果變量或者表達(dá)式為true, 會顯示標(biāo)簽, 否則隱藏
二. v-if
v-if控制標(biāo)簽顯示
語法: v-if=“變量或者表達(dá)式”
v-if通過控制標(biāo)簽是否刪除顯示 , v-if有性能優(yōu)勢
三. 代碼示例
<template> <div> <h2 v-show="age >= 18">年滿18歲才能看到以下內(nèi)容</h2> <hr> <h2 v-if="age >= 18">年滿18歲才能看到以下內(nèi)容</h2> </div> </template>
<script> export default { data() { return { age: 1, }; }, methods: {}, }; </script> <style></style>
四.v-if-else
v-if可以和v-else搭配, 用來條件控制顯示
v-if和v-else一定要是相鄰元素
v-if和v-else-if還有v-else可以一起搭配, 實(shí)現(xiàn)多個條件判斷
v-show是不可以和v-else搭配使用
代碼示例
<template> <div> <h2 v-if="age >= 18">來吃榴蓮</h2> <h2 v-else>來吃甜甜圈</h2> <h2 v-if="age < 18">甜甜圈</h2> <h2 v-else-if="age < 60">枸杞泡水</h2> <h2 v-else-if="age < 80">腦白金</h2> <h2 v-else-if="age < 100">冬蟲夏草</h2> <h2 v-else>靈丹妙藥</h2> </div> </template>
<script> export default { data() { return { age: 18, }; }, methods: {}, }; </script> <style></style>
讀到這里,這篇“如何使用vue控制元素顯示隱藏”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。