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


Posted in Javascript onNovember 09, 2020

如下所示:

<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 防止页面加载时看到花括号的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
各种常用的JS函数整理
Oct 25 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
Webpack的Loader和Plugin的区别
Nov 09 #Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 #Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 #Javascript
详解nginx配置vue h5 history去除#号
Nov 09 #Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 #Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 #Javascript
You might like
五个PHP程序员工具
2008/05/26 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
wxPython 入门教程
2008/10/07 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python实现栈的方法
2015/05/26 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
中国梦的演讲稿
2014/01/08 职场文书
留守儿童工作方案
2014/06/02 职场文书
节电标语大全
2014/06/23 职场文书
另类冲刺标语
2014/06/24 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
如何写早恋检讨书
2014/09/10 职场文书
领导干部失职检讨书
2015/05/05 职场文书
寒假致家长的一封信
2015/10/10 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server