如何利用Vue.js庫中的v-if內部指令判斷元素顯示

Vue.js庫中帶有壹些內部指令，有v-if、v-show、v-else、v-on等。其中，v-if是根據表達式的值判斷壹個元素是生成或移除，如果判斷為true，就生成元素；否則，移除元素。下面利用壹個實例說明v-if的用法，操作如下：

工具/原料

Vue.js

HBuilder

截圖工具

瀏覽器

方法/步驟

第壹步，創建靜態頁面vif.html，為了表達v-if指令實例，添加title內容，如下圖所示：

第二步，引入Vue.js核心js文件

<script src="../js/vue.min.js" ></script>

如下圖所示：

第三步，在body元素內部插入壹個div和p，並給div壹個id值，p元素內添加壹個v-if，值為boolean，內部內容為“歡迎使用Vue.js”，如下圖所示：

第四步，在<script></script>中編寫Vue.js代碼，設置el和data數據，預覽頁面，如下圖所示：

第五步，將data內boolean設置為false，設置完畢，進行查看效果，如下圖所示：

第六步，再次預覽頁面，發現“歡迎使用Vue.js”不顯示出來，如下圖所示：

上一篇:關於源引用的備註

下一篇:怎麽在VB中求和