条件渲染 v-if v-else-if v-else
v-show
v-if VS v-show
v-if 是真正的条件渲染。
会重建和销毁html元素
v-show 带有v-show指令的元素始终会被渲染并保留在DOM中
v-show的显示与隐藏式通过切换css 里的display属性值
display属性值为 none 隐藏
除此之外都是显示状态
常用的display属性值有
block 为块元素
inline-block 内联块元素
inline 行内元素(内联元素)
flex 为弹性容器
table-cell 为表格元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
body{
display:;
} </style>
</head>
<body>
<div id="app">
<span v-if="type==='A'"> hello A</span>
<span v-else-if="type==='B'">hello B</span>
<span v-else>not A、B</span>
<!-- 切换的是css元素的diplay属性，只要不是none 常见的display属性介 -->
<p v-show="ok">雷德王</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
type:"c",
ok:'flex'
}
});
</script>
</body>
</html>
范例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 想切换多个元素，此时可以用template当做不可见的包裹元素
最终的渲染结果将不包含template元素 -->
<template v-if="screen">
<p>hello world</p>
<p>hello Vue</p>
</template>
<template v-else>
<p>123445</p>
<p>wefadfasf</p>
</template>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
screen:false,
}
});
</script>
</body>
</html>