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使用v-if实现显示与隐藏功能示例

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

来源:https://blog.csdn.net/code_pupil/article/details/79677747

标签:vue.js,v-if
0
投稿

猜你喜欢

  • 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
  • asp之家 网络编程 m.aspxhome.com