简单介绍Vue中v-if,v-else,v-else,以及 v-show 的用法.
- v-if
- v-else-if
- v-else
- v-show
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件渲染</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'div',
data:{
flag: 1,
is_show:false // true 代表显示
}
});
}
</script>
</head>
<body>
<div>
<p v-if='flag==1'>PA标签内容</p>
<p v-else-if='flag==2'>PB标签内容</p>
<p v-else-if='flag==3'>PC标签内容</p>
<p v-else>PD标签内容</p>
<p v-show='is_show==true'>通过 v-show 来控制条件渲染一个标签是否显示 </p>
</div>
</body>
</html>
-
v-show用法和v-if大致一样,但是它不支持v-else,它和v-if的区别是,它制作元素样式的显示和隐藏,元素一直是存在的
-
注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突