Vue 条件渲染
Vue 条件渲染：v-show、v-if、v-else、v-else-if
v-show
写法：v-show="表达式"
特点：不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉
适用于：切换频率较高的场景
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-show="false">{{msg}}</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
msg: '你好',
}
})
</script>
</html>
v-if
写法：
v-if="表达式"v-else="表达式"v-else-if="表达式"
特点：不展示的 DOM 元素直接被移除
适用于：切换频率较低的场景
注意：v-if 可以和 v-else、v-else-if 一起使用，但结构不能被打断
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-if="false">{{msg}}</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
msg: '你好',
}
})
</script>
</html>
v-else 和 v-else-if
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2 v-show="false">{{msg}}</h2>-->
<!-- <h2 v-if="false">{{msg}}</h2>-->
<h2>n = {{n}}</h2>
<button @click="n++">n + 1</button>
<h2 v-if="n===1">壹</h2>
<h2 v-else-if="n===2">贰</h2>
<h2 v-else-if="n===3">叁</h2>
<h2 v-else>无</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
msg: '你好',
n: 0
}
})
</script>
</html>
template 和 v-if
template 不会破坏 v-if 结构
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>n = {{n}}</h2>
<button @click="n++">n + 1</button>
<template v-if="n===1">
<h2>张三</h2>
<h2>李四</h2>
<h2>王五</h2>
</template>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
msg: '你好',
n: 0
}
})
</script>
</html>
浙公网安备 33010602011771号