Vue.js页面加载闪现@{{value}}标签，加载完成后变量不显示如何解决

我来帮你一步步排查解决这个问题，先搞定模板闪现的现象，再深挖内容不显示的根源。

一、解决@{{ value }}闪现的问题 #

这是Vue加载过程中未编译模板的典型表现，官方提供了v-cloak指令专门处理这个场景，操作很简单：

1. 在你的根组件或包含模板的外层元素上添加v-cloak属性：

   <div id="app" v-cloak>
     @{{ value }}
   </div>
   

2. 在CSS中添加对应的隐藏样式（可以放在Bootstrap样式之后，确保优先级足够）：

   [v-cloak] {
     display: none !important;
   }
   

这样只有当Vue完成模板编译后，元素才会显示出来，就不会看到未解析的标签了。

二、排查内容无法显示的问题 #

加载完成后内容不显示，大概率是以下几个原因之一，逐个排查：

1. 检查自定义模板分隔符的配置 #

你用了@{{ value }}而非Vue默认的{{ value }}，如果是为了避免和其他模板引擎（比如Twig、JSP）冲突，必须明确告诉Vue识别这个自定义分隔符：

• 若是根Vue实例：

  new Vue({
    el: '#app',
    delimiters: ['@{{', '}}'], // 配置自定义分隔符规则
    data() {
      return {
        value: '你要显示的内容'
      }
    }
  })
  

• 若是Vue组件：

  export default {
    delimiters: ['@{{', '}}'],
    data() {
      return {
        value: '组件要渲染的内容'
      }
    }
  }
  

如果没配置这个，Vue会直接忽略@{{}}格式的标签，自然不会渲染内容。

2. 确认数据属性的正确定义 #

• 组件的data必须是返回对象的函数，不能直接写对象（这是组件和根实例的核心区别之一）：

  // 错误写法
  data: {
    value: '测试内容'
  }
  
  // 正确写法
  data() {
    return {
      value: '测试内容'
    }
  }
  

• 仔细检查value的拼写，确保它确实存在于data中（比如别把value写成val或者Value）。

3. 验证Vue实例/组件的挂载情况 #

• 确认根实例的el选项指向的DOM元素真实存在，比如你写了el: '#app'，页面里必须有对应的<div id="app"></div>。
• 如果是单文件组件，确保你已经在父组件中正确注册并使用了它（比如<your-component></your-component>）。

4. 核对脚本引入顺序 #

虽然你提到脚本都放在</body>前，但顺序不能乱：

<!-- 先引入Vue核心库 -->
<script src="vue.js"></script>
<!-- 再引入你的组件脚本或Vue实例代码 -->
<script src="your-component.js"></script>
<!-- 最后引入Bootstrap的JS文件（如果需要） -->
<script src="bootstrap.js"></script>

如果Vue在组件代码之后引入，组件会因为找不到Vue环境而报错，导致无法正常渲染。

总结 #

先用v-cloak解决闪现问题，再按上面的步骤排查分隔符配置、数据定义、挂载逻辑和脚本顺序，应该就能彻底解决你的问题了。

内容的提问来源于stack exchange，提问作者Jadasdas