1、v-if
描述
当需要根据后端返回数据渲染时，后端如果返回数据不为空渲染对应值，如果为空则渲染自定义的组件（标签/元素）。需要等待接口请求成功才能做判断，所以不能使用
vue自带的v-cloak命令，此命令只针对花括号绑定语法有用。使用v-if可以更好更有效的解决闪屏问题。
v-if与v-show的区别
1、
v-if只会在满足条件时才会编译，且v-if使用的是销毁和重建DOM的方式实现显示与隐藏元素。也就是说，在使用v-if时，若值为false，那么页面将不会生成html标签/元素。
2、v-show不管是否满足条件始终会编译，且v-show的显示与隐藏只是切换CSS的display属性。v-show不论其值是false还是true，html元素/标签都会存在。
3、一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果是需要频繁切换的功能，使用v-show较好，如果在运行时条件不大可能改变使用v-if较好。
4、v-if指令可以应用于template包装元素上，而v-show不支持template。
5、v-show不能与v-else配合使用，因为它们不是一个级别的物种，v-show只能与v-show配合使用，v-if只能与v-else配合使用。
6、在本例中无法把v-if绑定在template组件上，但是建议除了div跟标签，还是可以绑定到template上，多重防范，确保有效，亲测多次都不行。
使用v-if解决闪屏
<template v-if="flashingScreen">
<div v-if="flashingScreen">
<h1>闪屏</h1>
<div v-if="obj.name">姓名：{
{obj.nam}}</div>
<div v-else>暂无数据</div>
</div>
</template>
export default {
data() {
return {
// 解决闪屏问题
flashingScreen: false,
obj: {
},
};
},
created() {
this.getDataList();
},
methods: {
getDataList() {
try {
let result = getDataLists({
id: '123652569' });
this.obj.name = result.name;
this.$nextTick(() => {
this.flashingScreen = true;
});
} catch {
this.$nextTick(() => {
this.flashingScreen = true;
});
}
},
},
};
2、花括号闪退
在脚手架中一般不会出现花括号闪退问题，目前遇到的花括号闪退只在CND引入使用时存在。
v-cloak
<div v-cloak>{
{ message }}</div>
[v-cloak] {
display: none;
}
1、
v-cloak指令和css规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
2、v-cloak指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
3、注意样式层级，最好使用!important提高样式层级。
4、注意css存放位置导致无效，v-cloak的这个样式放在@import引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中。
5、样式最好放在整个文件最前面为好，切莫放在末尾，会影响编译且导致无效。
v-text
<span v-text="message"></span>
虽然在
vue的HTML标签里使用双号括号绑定变量，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content)，也就是上面遇到的闪退问题。