条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
v-else 必须与v-if一起使用或者使用在v-else-if之后。不然Vue将无法识别这个指令。
v-show
v-show与v-if使用方法大致一样，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 <template> 元素，也不支持 v-else
v-if与v-show之间的使用
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<!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>条件渲染</title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-if="dispaly==1">1</h2>
<h2 v-else-if="dispaly==2">2</h2>
<h2 v-else-if="dispaly==3">3</h2>
<h2 v-else>4</h2>
<span v-show="dispaly==2">我是Vue2</span>
<button @click="btn">切换</button>
</div>
<script>
new Vue({
el:'#app',
data:{
dispaly:1
},
methods: {
btn(){
this.dispaly++
if(this.dispaly==4){
this.dispaly=0
}
}
},
})
</script>
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
