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 相关文章推荐
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php分页函数完整实例代码
2014/09/22 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
python爬虫常用的模块分析
2014/08/29 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python实现自动发送邮件
2018/06/20 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python多图片合并PDF的方法
2019/01/03 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
MySQL学习之基础命令实操总结
2022/03/19 MySQL