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入門之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
vue初始化項(xiàng)目時(shí)報(bào)錯(cuò):Error:Cannot find module vue-temp
這篇文章主要介紹了vue初始化項(xiàng)目時(shí)報(bào)錯(cuò):Error:Cannot find module vue-template-compiler問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實(shí)操，下面文章主要以代碼展現(xiàn)，具有一的的知識(shí)參考性，需要的小伙伴可以參考一下2022-02-02
這篇文章主要介紹了vue頁(yè)面圖片不顯示問題解決方案,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue中使用$emit傳遞多個(gè)參數(shù)的2種方法
這篇文章主要給大家介紹了關(guān)于vue中如何使用$emit傳遞多個(gè)參數(shù)的2種方法,在Vue中可以使用$emit方法向父組件傳遞數(shù)據(jù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue相關(guān)配置文件詳解及多環(huán)境配置詳細(xì)步驟
這篇文章主要介紹了vue相關(guān)配置文件詳解及多環(huán)境配置的教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue使用mixin分發(fā)組件的可復(fù)用功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue遞歸組件的相關(guān)資料,遞歸組件是Vue.js中用于渲染層級(jí)結(jié)構(gòu)的強(qiáng)大工具,通過組件調(diào)用自身來簡(jiǎn)化復(fù)雜數(shù)據(jù)的渲染,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12