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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
JS ES6异步解决方案
Apr 29 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
谈谈Python中的while循环语句
2019/03/10 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
python 等差数列末项计算方式
2020/05/03 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Python标准库pathlib操作目录和文件
2021/11/20 Python