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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
js+html制作简单验证码
Feb 16 Javascript
javascript实现下雨效果
Mar 27 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python利用IPython提高开发效率
2016/08/10 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
外包公司软件测试工程师
2014/11/01 面试题
介绍一下except的用法和作用
2015/01/22 面试题
线程同步的方法
2016/11/23 面试题
自我评价的正确写法
2013/09/19 职场文书
2014高考励志标语
2014/06/05 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书