vue中的花括号无法绑定数据的解决方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
如下所示:
<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>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。