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='http://www.gepszalag.com/bcjs/js/vue.js' type='text/javascript' charset='utf-8'></script><!--引入vue--> <script src='http://www.gepszalag.com/bcjs/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='http://www.gepszalag.com/bcjs/js/vue.js' type='text/javascript' charset='utf-8'></script> <body> <div id='app'> <p>{{message}}</p> </div> </body> <script src='http://www.gepszalag.com/bcjs/js/main.js' type='text/javascript' charset='utf-8'></script></html>
以上這篇vue 防止頁面加載時看到花括號的解決操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。
相關文章:
1. Ajax常用封裝庫——Axios的使用2. jsp網頁實現貪吃蛇小游戲3. jsp+servlet簡單實現上傳文件功能(保存目錄改進)4. CSS Hack大全-教你如何區分出IE6-IE10、FireFox、Chrome、Opera5. 不使用XMLHttpRequest對象實現Ajax效果的方法小結6. 在 Ubuntu Linux 上安裝 Oracle Java 14的方法7. 如何在?ASP.NET?Core?Web?API?中處理?Patch?請求8. Android Studio進行APP圖標更改的兩種方式總結9. pybind11: C++ 工程提供 Python 接口的實例代碼10. PHP終止腳本運行三種實現方法詳解
