在Vue项目中,对于一个展示用户个人信息的页面。有以下需求,需要判断用户个人信息是否填充过,如果填充过,需要在页面中展示已填充项(未填充项不展示);如果未填充过,需要在页面中显示另外一种元素(提示用“去完善”个人信息)。
这时候,我们在页面中有如下元素:
<div v-if="userExist">
// 这里展示用户已填充的信息内容
</div>
<div v-else>
<img class="user-pic-tip" src="../../images/no_info.png"/>
<div class="user-info-tip">
<span>暂无基本资料数据</span>
<router-link to="/editUser">
<span class="data-link-to">去完善</span>
</router-link>
</div>
</div>
data中userExist有默认值——false:
export default {
name: "healthData",
data() {
return {
userExist: false, // 标记用户是否已填充个人信息
}
};
},
而用户到底有没有填充过个人信息是需要在mounted中通过接口从后端获取数据才可以知道,这里如果是填充过,后端会返回状态码200;如果没有填充过,后端会返回状态码201。
axios.get('/userInfo').then(res => {
if (res.data.data && res.data.status == 200) {
this.userExist = true
// 这里填充对所返回用户数据的解析
}
}
在上面这种代码情况下,因为userExist默认值为false,所以默认需要展示无数据的页面元素。又因为userExist值得变更需要通过axios请求的方式获取,就会有延时问题,即产生页面闪烁的情况。
解决方式:
这种问题我们就可以通过如下方式解决,因为无数据是页面中的元素较少,我们可以跟它们中的图片路径、文字等内容的初始值设置为空,请求结束时再为其重新赋值。
页面元素部分:
<div v-if="userExist">
// 这里展示用户已填充的信息内容
</div>
<div v-else>
<img class="user-pic-tip" :src="noDataTip.imgSrc"/>
<div class="user-info-tip">
<span>{{noDataTip.tipInfo}}</span>
<router-link to="/editUser">
<span class="data-link-to">{{noDataTip.jumpEditUser}}</span>
</router-link>
</div>
</div>
在data中进行声明:
export default {
name: "healthData",
data() {
return {
userExist: false, // 标记用户是否已填充个人信息
noDataTip: { // 用户未填写个人信息时要显示的页面元素的填充内容
imgSrc: '',
tipInfo: '',
jumpInfo: ''
}
}
};
},
重新赋值的过程:
axios.get('/userInfo').then(res => {
if (res.data.status == 10001) {
return context.noDataTip = {
imgSrc: require('../../images/no_data.png'),
tipInfo: '暂无基本资料数据',
jumpInfo: '去完善'
}
}
if (res.data.data && res.data.status == 200) {
this.userExist = true
// 这里填充对所返回用户数据的解析
}
}
通过这种方式,用户就不会看到闪烁的情况了。但是,上面这种方式有一个值得注意的地方,img标签的src属性如果想要通过属性绑定的方式给其动态赋值,有两种处理方式:1.通过上面代码中的 require('') 方式;2.通过书写绝对路径的方式。