一、v-show
写法：v-show="表达式"
适用于切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<h2 v-show="isFlag">欢迎来到{{city}}</h2>
<button @click="showMessage">点击</button>
</div>
<script type="text/javascript">
new Vue({
el:"#container",
data:{
city:"徐州",
isFlag: true
},
methods: {
showMessage(){
this.isFlag = ! this.isFlag
}
},
})
</script>
</body>
</html>二、v-if
写法：
v-if="表达式"
v-else-if="表达式"
v-else-if="表达式"
v-else
适用于切换频率低的情况
不展示的DOM被直接删除
注意：v-if和v-else-if一起使用，不能被打断
template和v-if配合使用,且不影响代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染v-if</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<h2 v-show="isFlag">显示n的值为{{num}}</h2>
<button @click="showMessage">点击</button>
<div v-if="num===1">北京</div>
<div v-else-if="num===2">上海</div>
<div v-else-if="num===3">深圳</div>
<div v-else>广州</div>
// template和v-if配合使用,且不影响代码块
<template v-if="num===0">
<div>123</div>
<div>456</div>
</template>
</div>
<script type="text/javascript">
new Vue({
el:"#container",
data:{
num:0,
isFlag: true
},
methods: {
showMessage(){
this.num++
console.log(this.num)
}
},
})
</script>
</body>
</html>
