VUE中隱藏和限制DIV或其他HTML元素
- 2019 年 10 月 7 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/wo541075754/article/details/101037196
在Vue中隱藏和限制Div或其他html元素操作非常簡單。通常有兩種方法可以實現：v-if和v-show這兩個判斷屬性。
下面通過一個簡單的實例來了解一下這兩種方式的實現。完整實例程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顯示和隱藏</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <H1>聯繫通過Vue隱藏和顯示Div</H1> <div id="app"> <div v-if="isShow">{{message}}</div> <div v-show="isTrue">歡迎關注微信公眾號：程式新視界</div> <div> <button @click="showOrHideMsg">顯示/隱藏(v-if)</button> <button @click="showOrHide">顯示/隱藏(v-show)</button> </div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { isShow: true, isTrue: true, message: 'Hello Vue!' }, methods: { showOrHideMsg: function () { // 取反 this.isShow = !this.isShow; }, showOrHide: function () { // 取反 this.isTrue = !this.isTrue; } } }) </script> </body> </html>
首先在上面的程式碼中通過CDN引入了vue.js。通過el指定的vue監控的範圍。其中在id為app的div中實現了兩種方式的展示v-if=」isShow」和v-show=」isTrue」，他們的用法基本一樣。
下面的js腳本中對vue進行初始化，默認這兩個div都是顯示的。因為isShow和isTrue都默認為true。
然後定義了兩個按鈕，並對兩個按鈕進行事件綁定，兩個方法的實現都是對默認的布爾類型取反並賦值給自身。
此時，通過點擊兩個按鈕，就可以循環的顯示和隱藏div元素。
