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脚本实现Web页面信息交互
Dec 21 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
vue组件实例解析
Jan 10 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
js实现多个标题吸顶效果
Jan 08 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/07/29 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
工作过失检讨书
2014/02/23 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
检讨书怎么写
2015/01/23 职场文书
企业战略合作意向书
2015/05/08 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle