vue.js使用v-if实现显示与隐藏功能示例


Posted in Javascript onJuly 06, 2018

本文实例讲述了vue.js使用v-if实现显示与隐藏功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- Vue.js -->
 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
 <p v-if="show">显示这段文本</p>
</div>
</body>
</html>
<script>
 //当数据show的值为true时,p元素会被插入,为false时会被移除
 var myData = {
  show:true
 };
 var app = new Vue({
  el:'#app',
  data:myData,
 })
</script>

此处的v-if判断show为true,正常显示P元素文本,如下图所示:

vue.js使用v-if实现显示与隐藏功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
You might like
php 如何获取数组第一个值
2013/08/06 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
python返回昨天日期的方法
2015/05/13 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
社团文化节策划书
2014/02/01 职场文书
职位说明书范文
2014/05/07 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
基层党支部承诺书
2015/04/30 职场文书
联谊会开场白
2015/06/01 职场文书
创业计划书介绍
2019/04/24 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript