如下所示:

<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="/UploadFiles/2021-04-02/vue.js">

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="/UploadFiles/2021-04-02/vue.js">

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

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!