vue页面刚加载展示插值表达式（单纯使用html）

最新推荐文章于 2023-05-09 10:52:17 发布

原创

最新推荐文章于 2023-05-09 10:52:17 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #javascript

本文介绍了在Vue中遇到页面加载时插值表达式短暂显示的问题，以及如何通过添加v-cloak指令来解决这个问题，确保页面加载时不会显示未渲染的JavaScript代码。

1、单纯使用cdn引入vue.js，使用html制作页面，使用到{ {}}插值渲染数据时，页面一加载就先出现一些插值表达式的代码形式，然后变成数据内容。

<div class="maxHeight">
  <span class="commonTxt">今日平均 <span class="commomNum" v-if="dataObj && dataObj.todayAvg">{
   
   { dataObj && dataObj.todayAvg?Number(dataObj.todayAvg).toFixed(2): "-" }}</span></span>
  <span class="commonTxt">昨日平均 <span class="commomNum" v-if="dataObj && dataObj.yesterdayAvg">{
   
   { dataObj && dataObj.yesterdayAvg?Number(dataObj.yesterdayAvg).toFixed(2): "-" }}</span></span>
</div>

2、以为是异步的问题，调式了好久，后面大佬说了有v-cloak指令: 官网 https://cn.vuejs.org/v2/api/#v-cloak