項目背景應用中需要用到地圖不使用高德地圖 直接使用leaflet的方式加載地圖故使用H5的方式
H5中引入Vue 發現能看如<div>{{data}}</div>這樣的數據節點 給用戶體驗不好需優化
可使用以下方式處理
v-cloak指令（用于在 Vue 實例加載和編譯之前隱藏元素）
通過這種方式，當Vue實例編譯之前，帶有"v-cloak"指令的元素會被隱藏起來，避免在未完成編譯時顯示出未經處理的插值表達式。一旦Vue實例編譯完成，樣式會被移除，元素就能正常顯示出插值表達式的結果。
1.v-cloak 指令的用法
v-cloak 指令通常與 CSS 配合使用，用于在 Vue 實例加載和編譯之前隱藏元素。通過給元素添加 v-cloak 屬性，然后在 CSS 中定義對應的樣式，可以確保在 Vue 實例加載完成前，該元素的內容不會顯示在頁面上。
使用 v-cloak 指令的一般步驟如下：
在 HTML 中定義元素，并添加 v-cloak 屬性：
<div id="app">
? <div v-cloak>
? ? <!-- Vue 綁定的內容 -->
? </div>
</div>
在 CSS 中定義?v-cloak?的樣式，使元素隱藏：
?[v-cloak] {
? display: none;
}
在上面的示例中，通過給?<div>?元素添加?v-cloak?屬性，并定義對應的 CSS 樣式，可以確保在 Vue 實例加載完成之前，該元素的內容不會顯示在頁面上?
完整示例
<style>[v-cloak]{display: none;}
</style><body>
<div id="app" v-cloak>{{msg}}</div><script>new Vue({el: '#app',data: {msg: '歡迎Vue!'}})
</script>
</body>?2.?v-text
"v-text"通常用于Vue.js中，它是用來設置元素的文本內容的指令。通過使用"v-text"指令，你可以將數據綁定到元素上，從而動態地更新元素的文本內容。這在構建動態頁面時非常有用，因為它允許你根據數據的變化來更新頁面上的文本內容。例如，在Vue.js中，你可以這樣使用"v-text"指令：
<div v-text="message"></div>
?
3.v-html
v-html"是Vue.js中的一個指令，用于將數據作為HTML插入到元素中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>.red-text {color: red;}</style>
</head>
<body><div id="app"><div v-html="htmlContent"></div></div><script>new Vue({el: '#app',data: {htmlContent: '<p>This is some <strong class="red-text">HTML</strong> content.</p>'}});</script>
</body>
</html>
)
——DQL分組查詢)
 QLineEdit介紹)
