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操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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数组实例详解
2016/06/26 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
买房子个人收入证明
2014/01/16 职场文书
北京大学自荐信范文
2014/01/28 职场文书
药店主任岗位责任制
2014/02/10 职场文书
提拔干部考察材料
2014/05/26 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
毕业设计致谢语
2015/05/14 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
python利用while求100内的整数和方式
2021/11/07 Python