Vue.js学习记录之在元素与template中使用v-if指令实例


Posted in Javascript onJune 27, 2017

本文主要给大家介绍的是关于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为关闭状态。

Vue.js学习记录之在元素与template中使用v-if指令实例

有兴趣的可以试试把 show2: false的false改为true,可以看到两条信息,如下:

在Vue.js中,当判断语句为true,可以显示信息,当为false时候不显示

我是 show1,默认是开启的(true),当你设置false我不显示!

我是 show2,默认是关闭的,当你设置show2的值为true,我会被显示!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
actionscript与javascript的区别
May 25 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
React组件之间的通信的实例代码
Jun 27 #Javascript
JS实现图片预览的两种方式
Jun 27 #Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 #Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 #Javascript
You might like
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
原生js实现轮播图
2017/02/27 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
详解从Vue-router到html5的pushState
2018/07/21 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
pycharm实现猜数游戏
2020/12/07 Python
毕业生动漫设计求职信
2013/10/11 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
婚庆司仪开场白
2015/05/29 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
你会写请假条吗?
2019/06/26 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL