主页 / 网络编程 /

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

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了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 防止页面加载时看到花括号的解决操作就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：vue data有值,但是页面{{}} 取不到值的解决 下一篇：Webpack的Loader和Plugin的区别

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by