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 21 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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中AES加密解密的例子小结
2014/02/18 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Django 路由系统URLconf的使用
2018/10/11 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
员工考核管理制度
2014/02/02 职场文书
《石榴》教学反思
2014/03/02 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
办护照工作证明
2014/10/01 职场文书
电影雨中的树观后感
2015/06/15 职场文书
公司安全管理制度范本
2015/08/05 职场文书
爱国主题班会教案
2015/08/14 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android