<!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>Document</title>
<style>
/* .box{
display: none;
color: red;
}
*/
</style>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'.box',
data:{
isShow:false,
number:0
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- v-show 显示和隐藏(true:显示,false:隐藏)
在这里要注意一点,css中如果设置了display会和v-show起冲突
-->
<p v-show="isShow">关于显示隐藏</p>
<!-- 多重条件 -->
<p v-if="number==0">first</p>
<p v-else-if="number==1">second</p>
<p v-else-if="number==2">third</p>
<p v-else>fourth</p>
<!-- 单条件 -->
<p v-if="isShow">the only one</p>
<p v-if="isShow">the second</p>
<!-- 条件渲染 指令v-if 隐藏内容,但是这个隐藏和上面v-show和display的隐藏不一样,这里的隐藏是删除了标签,可以检查元素查看 -->
<p v-if="isShow">v-if条件渲染删除标签</p>
</div>
</body>
</html>
vue的条件渲染
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80785793
今日推荐
周排行