vue 防止頁面載入時看到花括號的解決操作
阿新 • • 發佈：2020-11-10
如下所示：
<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>以上這篇vue 防止頁面載入時看到花括號的解決操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。