vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能示例
更新時(shí)間：2018年07月06日 12:07:43 作者：_code小學(xué)生
這篇文章主要介紹了vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了使用v-if進(jìn)行判斷實(shí)現(xiàn)元素的顯示與隱藏功能,需要的朋友可以參考下
本文實(shí)例講述了vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能。分享給大家供大家參考，具體如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">顯示這段文本</p>
</div>
</body>
</html>
<script>
//當(dāng)數(shù)據(jù)show的值為true時(shí)，p元素會(huì)被插入，為false時(shí)會(huì)被移除
var myData = {
show:true
};
var app = new Vue({
el:'#app',
data:myData,
})
</script>
此處的v-if判斷show為true，正常顯示P元素文本，如下圖所示：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Vue樣式綁定的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解
這篇文章主要為大家介紹了vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue項(xiàng)目中使用tinymce編輯器的步驟詳解
本文分步驟給大家介紹了vue項(xiàng)目中使用tinymce編輯器的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題
本文主要介紹了解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫(xiě)法實(shí)例
這篇文章主要為大家介紹了iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫(xiě)法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue實(shí)現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶編輯。本文將詳細(xì)介紹如何實(shí)現(xiàn)contenteditable元素的雙向綁定，需要的可以參考一下2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue管理系統(tǒng)前端之組件拆分封裝的相關(guān)資料，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08