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开发技术大全-第1章javascript概述
Jul 03 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 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加密解密的代码
2007/07/16 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JS实现标签页效果(配合css)
2013/04/03 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
一些Solaris面试题
2013/03/22 面试题
银行实习生的自我评价
2014/01/13 职场文书
二年级体育教学反思
2014/01/15 职场文书
西式结婚主持词
2014/03/14 职场文书
工资证明范本
2015/06/12 职场文书
中学总务处工作总结
2015/08/12 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Python&Matlab实现樱花的绘制
2022/04/07 Python