一、v-if
控制元素显隐，每次都会重新删除或创建dom。有更高的性能消耗，每次都要删除或创建，如果元素可能在这个页面永远也不会显示出来给用户看到则推荐使用。
二、v-show
控制元素显隐，不会进行元素dom的操作，只是切换了display：none样式。有较高的初始渲染消耗，每次打开页面不管要不要显示都要进行渲染，如果元素涉及到频繁的切换则推荐使用。
三、测试代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="改变flg" @click="flg=!flg"/>
<!-- 元素每次切换都会进行dom的重新删除或新增 -->
<h3 v-if="flg">v-if的测试</h3>
<!-- 元素切换只是对display:none样式进行了切换 -->
<h3 v-show="flg">v-show的测试</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flg:true,
}
})
</script>
</body>
</html>
切换后
四、v-if 判断数组长度length报错
今天项目中，在
v-if中通过三元表达式判断数组长度进行显示隐藏。
<div class='contain_margin' v-if="relyData.data.length>0?true:false">...</div>
虽然执行代码可以正常运行，但是控制台报出警告。
只是因为，没有预先判断数组是否存在，
.length有可能会出错，需要先对数组进行非空验证。
class='contain_margin' v-if="relyData.data!=undefined && relyData.data.length>0?true:false">
网友评论