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 未结束的字符串常量常见解决方法
Jan 24 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScript静态的动态
2006/09/18 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python3 replace()函数使用方法
2018/03/19 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
内业资料员岗位职责
2014/01/04 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
浅谈Python数学建模之整数规划
2021/06/23 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏