uniapp 嵌套H5页面会看到插值表达式的问题

项目背景应用中需要用到地图不使用高德地图 直接使用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 实例加载完成之前,该元素的内容不会显示在页面上

完整示例

html 复制代码
<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插入到元素中

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/[email protected]/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>
相关推荐
264玫瑰资源库1 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端12 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED18 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪39 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt