v-for和v-if与v-show能否一起使用

v-show和v-if能否共同使用

v-show 本质是 操作css样式display属性来控制元素 显示和隐藏
v-if 本质是 控制页面上DOM节点添加和删除
虽然直观的样式都是我们在页面上能不能看到我们的元素标签,但是本质是不一样的哦~
看本质display属性值 和 DOM的添加和删除没有冲突
所以v-show和v-if,他们之间也是没有冲突的
我尝试了加上v-else也是正常的
所以得出的结论是v-show和v-if可以在同一标签内一起使用哦~

v-if和v-for的使用注意事项

但是v-if和v-for会有问题,不能用在统一标签上,否则性能会消耗很大
v-for 优先级 高于v-if
如果写在同一标签,
会先对所有数据进行一边循环一边执行v-if
再循环中多次对 DOM 元素进行添加或删除
这样会造成大量的性能消耗

解决办法
1.不要把v-for和v-if 写在同一个标签上
新建div 引入v-for 包裹v-if
2.使用v-show代替v-if