项目背景应用中需要用到地图不使用高德地图 直接使用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>
![[Java][Leetcode middle] 55. 跳跃游戏](http://pic.xiahunao.cn/nshx/[Java][Leetcode middle] 55. 跳跃游戏)
