Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
2017-05-25 21:52
1006 查看
语法比较简单,直接上代码:
true为开启状态,false为关闭状态。
有兴趣的可以试试把 show2: false的false改为true,可以看到两条信息,如下:
在Vue.js中,当判断语句为true,可以显示信息,当为false时候不显示
我是 show1,默认是开启的(true),当你设置false我不显示!
我是 show2,默认是关闭的,当你设置show2的值为true,我会被显示!
本人博客地址:Vue.js学习笔记:在元素 和 template 中使用 v-if 指令http://www.wangtuizhijia.com/archives/207
<!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学习笔记:在元素 和 template 中使用 v-if 指令http://www.wangtuizhijia.com/archives/207
相关文章推荐
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- Vue.js学习记录之在元素与template中使用v-if指令实例
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM(三)
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- 学习使用vue.js(三)条件与循环 v-if、 v-for
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- 【js学习笔记-015】-- 字符串的使用
- JavaScript学习笔记:使用DOM获取元素
- java web jsp学习笔记--概述-常用语法,指令,动作元素,隐式对象,域对象
- JQuery中使用.each()遍历元素学习笔记
- CoAP学习笔记——nodeJS node-coap安装和使用(windows平台)
- 【js学习笔记-087】----文档和元素的几何形状和滚动(视口与窗口)
- java web jsp学习笔记--概述-常用语法,指令,动作元素,隐式对象,域对象
- ExtJS4学习笔记八--Template的使用
- js学习笔记___基本数据类型与使用
- J2EE学习笔记之JSP常用三个指令元素
- D3.js学习笔记(四)—— 使用SVG坐标空间
- 【JavaScript学习笔记】if使用