vue 防止页面加载时看到花括号的解决操作

更新时间：2020年11月09日 14:12:36 作者：Quincy379

这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<style>
  [v-cloak]{
    display:none
  }
</style>

v-cloak v-text v-html

v-cloak用于大段

v-text用于单个标签

v-html用于带有标签的处理

补充知识：vue花括号数据绑定不成功的问题

我就废话不多说了，大家还是直接看案例吧~

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--引入vue-->
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引入main-->
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>

  </body>
</html>

main.js如下图所示，只包含message信息，绑定到id为app的div上。

var app=new Vue({
  el:'#app',
  data:{
    message:'hhh'
  }
})

结果显示：

{{message}}

vue.js和自己写的js都在头部引用，并不能出现理想中的message信息。

更改一下引入顺序：

先引入vue.js——再写html内容——最后引入自己写的js代码。成功！原因暂时还不清楚，待日后填坑…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>
  </body>
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>

以上这篇vue 防止页面加载时看到花括号的解决操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+golang实现上传微信头像功能
这篇文章主要介绍了vue+golang实现上传微信头像功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga，下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容，具有一定的参考价值，需要的小伙伴可恶意参考一下
2021-12-12
vant-image本地图片无法显示的解决方式
这篇文章主要介绍了vant-image本地图片无法显示的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue开发利器之unplugin-auto-import的使用
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,下面这篇文章主要给大家介绍了关于vue开发利器之unplugin-auto-import使用的相关资料,需要的朋友可以参考下
2023-02-02
基于axios请求封装的vue应用实例代码
这篇文章主要给大家介绍了基于axios请求封装的vue应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue复杂表格单元格合并根据数据动态合并方式
这篇文章主要介绍了vue复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
element-ui中dialog弹窗关闭按钮失效的解决
这篇文章主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
在Vue3.x中实现类似React.lazy效果的方法详解
React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下
2024-03-03
vue实现分割验证码效果
这篇文章主要为大家详细介绍了vue实现分割验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue实现在页面上添加水印的示例代码
这篇文章主要给大家介绍一下vue实现在页面上添加水印的实例,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧
2023-12-12