工具/原料
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”不显示出来，如下图所示：
有6个。
v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；所以，v-if指令只渲染他身后表达式为true的元素；在这里引入v-show指令，因为二者的区别是v-show指令会渲染他身后表达式为false的元素，这样的元素上会添加css代码：style="display:none"将上面v-if的实例代码改为v-show
v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
v-else 必须跟在v-if/v-show指令之后，不然不起作用；如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素显示在页面上；
v-for 类似JS的遍历，用法为 v-for="item in items", items是数组，item为数组中的数组元素。
v-bind 这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。
v-on 用于监听指定元素的DOM事件，比如点击事件。
