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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
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版(2)
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python中map的基本用法示例
2018/09/10 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
餐饮加盟计划书
2014/01/10 职场文书
食品安全责任书
2014/04/15 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
结婚十年感言
2015/07/31 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技