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 相关文章推荐
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
js实现tab切换效果
Feb 16 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
JS实现的缓冲运动效果示例
Apr 30 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
vue中监听路由参数的变化及方法
Dec 06 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
C语言笔试集
2012/07/24 面试题
安全教育心得体会
2013/12/29 职场文书
农民工创业典型事迹
2014/01/25 职场文书
高效课堂标语
2014/06/26 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
体检通知范文
2015/04/21 职场文书
学校教学管理制度
2015/08/06 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书