【Vue】通过v-show和v-if实现对html元素的隐藏显示渲染（图文+完整示例）
<!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>
