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执行顺序
Nov 09 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
相对路径转化成绝对路径
2007/04/10 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
python操作cfg配置文件方式
2019/12/22 Python
Python enumerate内置库用法解析
2020/02/24 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
大学四年规划书范文
2013/12/27 职场文书
文明风采获奖感言
2014/02/18 职场文书
商铺租赁意向书
2014/04/01 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
学校2014年度工作总结
2014/12/06 职场文书
党员心得体会范文2016
2016/01/23 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers