vue解决花括号数据绑定不成功的问题


Posted in Javascript onOctober 30, 2019

如下所示:

<!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 相关文章推荐
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
vue中使用rem布局代码详解
Oct 30 #Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 #Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
html读出文本文件内容
2007/01/22 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python3实现猜数字游戏
2020/12/07 Python
Django中Middleware中的函数详解
2019/07/18 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python命令行click参数用法解析
2019/12/19 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
C语言面试题
2015/10/30 面试题
后勤部经理岗位职责
2014/02/23 职场文书
银行求职信范文
2014/05/26 职场文书
校运会口号
2014/06/18 职场文书
家长意见书
2015/06/04 职场文书
创业计划书之家教中心
2019/09/25 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript