<!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>Document</title>
</head>
<body>
<div id="app">
<div v-show="display">我是由v-show控制的</div>
<div v-if="display">我是由v-if控制的</div>
</div>
<script src="../../../../vue.js"></script>
<script>
new Vue({
e1:'#app',
data:{
display:true
}
})
</script>
【v-show】
1.本质就是标签display设置为none,控制隐藏。 只是基于CSS进行切换。
2.v-show有更高的初始渲染消耗。
3.v-show适合频繁切换的情况。
【v-if】
1.动态的向DOM树内添加或者删除DOM元素。
2.v-if有更高的切换消耗。
3.v-if适合运行条件很少改变的情况。
</body>
</html>
<!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>Document</title>
</head>
<body>
<div id="app">
<h3>周万方有多少钱请客</h3>
<div v-show="money>= 10000">请战神喝花酒</div>
<div v-else-show="money>= 5000">请战神去冰津河</div>
<div v-else-show="money>= 1000">请战神泡脚</div>
<div v-else>按着周万方锁战神牛子</div>
<hr>
<!--双分支使用v-show -->
<div v-show="age >=18">成年了,去冰津河。</div>
<div v-else>未成年,看战神去冰津河。</div>
</div>
<script src="../../../vue.js"></script>
<script>
new Vue({
e1:'#app',
data:{
money:2000,
age:16
}
})
</script>
</body>
</html>
<!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>Document</title>
</head>
<body>
<div id="app">
<h3>周万方有多少钱请客</h3>
<div v-if="money>= 10000">请战神喝花酒</div>
<div v-else-if="money>= 5000">请战神去冰津河</div>
<div v-else-if="money>= 1000">请战神泡脚</div>
<div v-else>按着周万方锁战神牛子</div>
<hr>
<!--双分支使用v-if -->
<div v-if="age >=18">成年了,去冰津河。</div>
<div v-else>未成年,看战神去冰津河。</div>
</div>
<script src="../../../vue.js"></script>
<script>
new Vue({
e1:'#app',
data:{
money:2000,
age:16
}
})
</script>
</body>
</html>
3462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
