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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
jQuery插件开发全解析
Oct 10 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
js正则相关知识点专题
May 10 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python生成随机密码
2015/03/10 Python
python 基础教程之Map使用方法
2017/01/17 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
公司离职证明范本
2014/01/13 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
设计师求职信
2014/07/01 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
工作表扬信范文
2015/01/17 职场文书
新闻稿标题
2015/07/18 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL