vue.js使用v-if實現(xiàn)顯示與隱藏功能示例
更新時間：2018年07月06日 12:07:43 作者：_code小學生
這篇文章主要介紹了vue.js使用v-if實現(xiàn)顯示與隱藏功能,結合簡單實例形式分析了使用v-if進行判斷實現(xiàn)元素的顯示與隱藏功能,需要的朋友可以參考下
本文實例講述了vue.js使用v-if實現(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>
//當數(shù)據(jù)show的值為true時，p元素會被插入，為false時會被移除
var myData = {
show:true
};
var app = new Vue({
el:'#app',
data:myData,
})
</script>
此處的v-if判斷show為true，正常顯示P元素文本，如下圖所示：
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)多個元素或多個組件之間動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
vue初始化項目時報錯:Error:Cannot find module vue-temp
這篇文章主要介紹了vue初始化項目時報錯:Error:Cannot find module vue-template-compiler問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實操，下面文章主要以代碼展現(xiàn)，具有一的的知識參考性，需要的小伙伴可以參考一下2022-02-02
這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹了關于vue中如何使用$emit傳遞多個參數(shù)的2種方法,在Vue中可以使用$emit方法向父組件傳遞數(shù)據(jù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue相關配置文件詳解及多環(huán)境配置的教程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue使用mixin分發(fā)組件的可復用功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue遞歸組件的相關資料,遞歸組件是Vue.js中用于渲染層級結構的強大工具,通過組件調(diào)用自身來簡化復雜數(shù)據(jù)的渲染,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12