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都在頭部引用,并不能出現(xiàn)理想中的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無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復提交,本文給大家展示效果圖和完整代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10vuex 實現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue 數值改變頁面沒有刷新的問題解決(數據改變視圖不更新的問題)
這篇文章主要介紹了Vue 數值改變頁面沒有刷新的問題解決(數據改變視圖不更新的問題),本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09