vue.js使用v-if实现显示与隐藏功能示例
作者:_code小学生 时间:2024-05-02 16:59:50
本文实例讲述了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程序设计有所帮助。
来源:https://blog.csdn.net/code_pupil/article/details/79677747
标签:vue.js,v-if


猜你喜欢
pandas将DataFrame的几列数据合并成为一列
2022-07-27 13:46:23
OpenCV半小时掌握基本操作之图像梯度
2022-05-29 00:48:03

python yield和Generator函数用法详解
2022-12-21 04:18:47
Python 网络爬虫--关于简单的模拟登录实例讲解
2022-11-21 16:52:55

flask-script模块的具体使用
2022-04-08 10:53:34
case 嵌套查询与连接查询你需要懂得
2024-01-24 02:11:02

ASP 正则表达式常用的几种方法(execute、test、replace)
2010-03-02 20:23:00
python实现决策树C4.5算法详解(在ID3基础上改进)
2022-05-06 08:01:57

php读取xml实例代码
2023-11-21 11:47:05
Python爬虫中urllib3与urllib的区别是什么
2023-04-04 05:48:12

SQL Server误区30日谈 第21天 数据损坏可以通过重启SQL Server来修复
2024-01-23 01:53:48
git 将本地文件(夹)上传到gitee指定分支的处理方法
2023-05-29 06:18:23

如何从MySQL数据库表中检索数据
2008-11-01 17:08:00
提一个懒人需求——找遥控器的电视
2009-03-23 18:16:00

python实现二维插值的三维显示
2022-05-28 14:17:58

Mysql出现问题:error while loading shared libraries: libaio解决方案
2024-01-13 00:12:00

用Python的Django框架完成视频处理任务的教程
2022-05-07 05:38:25
详解Python计算机视觉 图像扭曲(仿射扭曲)
2021-06-13 15:57:43

UCDChina.com 关于用户期望的讨论
2008-07-10 11:55:00
PHP扩展之kafka安装应用案例详解
2023-09-06 09:53:43