广告
返回顶部
首页 > 资讯 > 前端开发 > html >vue中花括号数据绑定失败如何解决
  • 485
分享到

vue中花括号数据绑定失败如何解决

2024-04-02 19:04:59 485人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关Vue中花括号数据绑定失败如何解决,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。如下所示:<!DOCTYPE h

这篇文章将为大家详细讲解有关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中花括号数据绑定失败如何解决就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: vue中花括号数据绑定失败如何解决

本文链接: https://www.lsjlt.com/news/72476.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中花括号数据绑定失败如何解决
    这篇文章将为大家详细讲解有关vue中花括号数据绑定失败如何解决,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。如下所示:<!DOCTYPE h...
    99+
    2022-10-19
  • vue双向数据绑定失灵了如何解决
    今天小编给大家分享一下vue双向数据绑定失灵了如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在数据属性上直接更改值如...
    99+
    2023-07-06
  • vue3中ref绑定dom或组件失败如何解决
    本文小编为大家详细介绍“vue3中ref绑定dom或组件失败如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中ref绑定dom或组件失败如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue...
    99+
    2023-07-06
  • vue中如何解除数据之间的双向绑定
    目录如何解除数据之间的双向绑定问题结论vue双向绑定2.0和3.0区别vue2.0实现双向绑定vue3.0实现双向绑定vue2.0和Vue3.0双向绑定的区别观察者模式和发布者订阅者...
    99+
    2022-11-13
  • vue表单数据绑定变量不存在报错如何解决
    本篇内容介绍了“vue表单数据绑定变量不存在报错如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、v-model的使用方法v-mod...
    99+
    2023-07-06
  • mysql中使用innodb创建数据文件失败如何解决
    这篇文章给大家介绍mysql中使用innodb创建数据文件失败如何解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。innodb创建数据文件失败的解决 /etc/my.cnf...
    99+
    2022-10-18
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作