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中的关联数组分析
Apr 09 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
javascript常用代码段搜集
2014/12/04 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
python实现二叉树的遍历
2017/12/11 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python之pandas用法大全
2018/03/13 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
大四学年自我鉴定
2013/11/13 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
团队拓展活动总结
2014/08/27 职场文书
未婚证明书模板
2014/10/08 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
详解Nginx 工作原理
2021/03/31 Servers
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL