Vue.js学习记录之在元素与template中使用v-if指令实例
本文主要给大家介绍的是关于Vue.js在元素与template中使用v-if指令的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
语法比较简单，直接上代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="wangtuizhijiademo"> <p v-if="instruction">在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示</p> <template v-if="show1"> <p>我是 show1，默认是开启的（true），当你设置false我不显示！</p> </template> <template v-if="show2"> <p>我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！</p> </template> </div> <script> new Vue({ el: '#wangtuizhijiademo', data: { instruction:true, show1: true, show2: false } }) </script> </body> </html>
true为开启状态，false为关闭状态。
有兴趣的可以试试把 show2: false的false改为true，可以看到两条信息，如下：
在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示
我是 show1，默认是开启的（true），当你设置false我不显示！
我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对小牛知识库的支持。
-
本文向大家介绍Vue.js常用指令汇总（v-if、v-for等），包括了Vue.js常用指令汇总（v-if、v-for等）的使用技巧和注意事项，需要的朋友参考一下 有时候指令太多会造成记错、记混的问题，所以本文在记忆的时候会采用穿插记忆的方式，交叉比对，不易出错。 本文主要讲了一下六个指令： v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲
-
本文向大家介绍vue学习笔记之v-if和v-show的区别，包括了vue学习笔记之v-if和v-show的区别的使用技巧和注意事项，需要的朋友参考一下 v-if vs v-show v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相
-
本文向大家介绍AngularJS学习笔记之ng-options指令，包括了AngularJS学习笔记之ng-options指令的使用技巧和注意事项，需要的朋友参考一下 1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 2.自定义下拉显示名称(label for value in array)
-
本文向大家介绍Vue.js v-if / v-else，包括了Vue.js v-if / v-else的使用技巧和注意事项，需要的朋友参考一下 示例 假设我们有一个Vue.js实例定义为： 您可以通过包含v-if指令有条件地呈现任何html元素；包含v-if的元素仅在条件评估为true时才会呈现： <h1>在这种情况下，该元素将呈现，因为变量'a'为true。v-if可以与任何计算结果为布尔值的表
-
本文向大家介绍vue学习笔记之动态组件和v-once指令简单示例，包括了vue学习笔记之动态组件和v-once指令简单示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考，具体如下： 点击按钮时，自动切换两个组件 <component :is="type"></component>，当点击按钮之后，会自动清除原来的组件，显示新的组件。
-
本文向大家介绍JQuery中使用.each()遍历元素学习笔记，包括了JQuery中使用.each()遍历元素学习笔记的使用技巧和注意事项，需要的朋友参考一下 今天写一个选项卡的时候，需要用到jquery中的.each(),通过获取each()中的index参数来获取li元素的编号，方便下面区块显示，在一个测试页面上写好了下面的代码： 测试的结果是正常，后来在一个实际使用的页面中使用的时候，发现上