vue中v-show 和 v-if 的区别：
2020-10-11 本文已影响0人
lucky_yao
v-show ： 显示和隐藏
v-if : 创建和销毁
相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3> v-show 显示隐藏 通过display</h3>
<p v-show="a=='apple'">fff</p>
<h3> v-if 显示隐藏 通过有无 这个标签</h3>
<p v-if="a=='apple'">显示隐藏</p>
<h3> v-if v-else-if v-else 做判断</h3>
<div v-if="num>=90">
优秀
</div>
<div v-else-if="num>=60">
良好
</div>
<div v-else>
不及格
</div>
<input type="text" v-model="msg"/>
{{msg}}
<h3> v-once 只展示一次 不会跟着变化而变化</h3>
<p v-once>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '111',
h1styleobj: {
'color': 'red',
'background-color': 'pink'
},
h1styleobj1: {
'font-size': '50px'
},
tr:true,
f:false,
a:'apple',
num:'60'
}
})
</script>
</html>
