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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php格式文件打开的四种方法
2018/02/24 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js函数调用的方式
2014/05/06 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
升职自荐信
2013/11/28 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
驳回起诉裁定书
2015/05/19 职场文书