vue.js使用v-if實現(xiàn)顯示與隱藏功能示例
更新時間:2018年07月06日 12:07:43 作者:_code小學(xué)生
這篇文章主要介紹了vue.js使用v-if實現(xiàn)顯示與隱藏功能,結(jié)合簡單實例形式分析了使用v-if進(jìn)行判斷實現(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> //當(dāng)數(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程序設(shè)計有所幫助。
相關(guān)文章
Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題
本文主要介紹了解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題,文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例
這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題
這篇文章主要介紹了解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue實現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性,表示元素是否可以被用戶編輯。本文將詳細(xì)介紹如何實現(xiàn)contenteditable元素的雙向綁定,需要的可以參考一下2022-05-05