vue花括号数据绑定失败怎么解决

发布时间：2022-10-22 13:40:37 阅读：140 作者：iii 栏目：开发技术

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍了vue花括号数据绑定失败怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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花括号数据绑定失败怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue花括号数据绑定失败怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

vue花括号数据绑定失败怎么解决

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签