<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
<div id="box">
<h5 v-show="mShow"> 【v-show】示例显示和隐藏!</h5>
<button @click="mClick">{{buttonName}}</button>
<br><br>
<h5> 【v-show】当前N的值是:{{n}}</h5>
<div v-show="n === 1">n=1我显示</div>
<div v-show="n === 2">n=2我显示</div>
<div v-show="n === 3">n=3我显示</div>
<button @click="nClick">点我加1</button>
<br><br>
<h5> 【v-if】当前N的值是:{{n}}</h5>
<div v-if="n === 1">n=1我显示</div>
<div v-if="n === 1">n=2我显示</div>
<div v-if="n>=3">n>=3我显示</div>
<button @click="nClick">点我加1</button>
<h5> 【v-else-if】当前N的值是:{{n}}</h5>
<div v-if="n === 1">n=1我显示</div>
<div v-else-if="n === 1">n=2我显示</div>
<div v-else>其他我显示</div>
<button @click="nClick">点我加1</button>
<h5> 通过【template】实现一组ul的条件</h5>
<template v-if="n===1">
<li>张飞</li>
<li>刘备</li>
<li>关羽</li>
</template>
</div>
<!-- <button @click="bClick">点击加1,且显示对应的DIV</button> -->
<!-- <button @click="mClick">点击显示</button> -->
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
buttonName: "点击我隐藏",
mShow: true,
n: 0,
},
methods: {
nClick() {
this.n = this.n + 1;
// this.n = this.n + 1;
},
mClick() {
if (this.mShow == true) {
this.mShow = false;
this.buttonName = "点击我显示";
} else {
this.mShow = true;
this.buttonName = "点击我隐藏";
}
},
},
})
</script>
</html>
【Vue】通过v-show和v-if实现对html元素的隐藏显示渲染(图文+完整示例)
原创
©著作权归作者所有:来自51CTO博客作者敦厚的曹操的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Vue - v-text、v-html
推荐:Vue学习汇总Vue学习(九)- v-text、v-htmlinnerText和innerHTML的区别代
html vue.js javascript 前端 -
【视频】v-html的使用
v-html的使用
ide v9 html -
初识Vue 3.0 —— v-html: 插入html
<h5>9.v-html插入html</h5><div class="htmlbox"> <p>没有用v-htm...
vue html python javascript js -
vue中v-text / v-html
vue中v-text / v-html使用 显示123
html vue.js .net 数据 javascript -
springboot 队列处理任务 springboot队列堵塞
一、基本介绍 1,什么是 Disruptor?(1)Disruptor 是英国外汇交易公司 LMAX 开发的一个高性能的并发框架。可以认为是线程间通信的高效低延时的内存消息组件,它最大的特点是高性能。与 Kafka、RabbitMQ 用于服务间的消息队列不同,disruptor 一般用于一个 JVM 中多个线
springboot 队列处理任务 springboot spring boot disruptor 多线程框架 -
Centos 备份服务器要装什么软件 centos全盘备份
数据库备份操作是非常重要的一步,针对上线系统来说,没有备份的数据库是不安全的。本博文通过查阅网上资料,实现了mysql数据库通过shell脚本文件的全备份,增量备份和局域网内定时备份操作。 服务器介绍:centos 7.0 【本地全备份】 &nb
Centos 备份服务器要装什么软件 centos 局域网 备份 mysql