Question

如何利用Vue.js库中的v-if内部指令判断元素显示

Answer 1

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”不显示出来，如下图所示：