Uniapp 为什么用 div 不显示？模板语法 3 个必改细节

原创于 2025-09-08 08:15:00 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

在 Uniapp 中使用 <div> 标签不显示是常见的模板语法问题，主要因为 Uniapp 的跨平台特性要求使用专用组件。以下是必须修改的 3 个关键细节：

1. 替换 HTML 标签为 Uniapp 组件

问题原因：
Uniapp 需要编译到小程序平台（如微信/支付宝），这些平台不支持原生 HTML 标签。
解决方案：

用 <view> 替代 <div>（块级容器）
用 <text> 替代 <span>（行内文本）

<!-- 错误示例 -->
<div>内容</div>

<!-- 正确示例 -->
<view>内容</view>

2. 检查样式作用域

问题原因：
使用 scoped 样式或深度选择器不当会导致样式失效。
解决方案：

移除 scoped 或使用 ::v-deep 穿透

/* 错误示例 */
<style scoped>
.div-class { /* 不生效 */ }
</style>

/* 正确示例 */
<style>
/* 全局样式 */
.view-class { 
  display: flex;
}
</style>

/* 或穿透语法 */
<style scoped>
::v-deep .view-class { 
  padding: 10rpx;
}
</style>

3. 验证组件渲染条件

问题原因：
数据未初始化或渲染条件冲突会导致元素不渲染。
解决方案：

确保数据源已初始化
避免 v-if 和 v-for 共用

<!-- 错误示例 -->
<view v-for="item in list" v-if="showItem"> 
  {{ item }}
</view>

<!-- 正确示例 -->
<view v-if="showList">
  <view v-for="item in list" :key="item.id">
    {{ item }}
  </view>
</view>

完整修正示例

<template>
  <!-- 使用 view 替代 div -->
  <view class="container">
    <!-- 确保数据已初始化 -->
    <view v-for="item in dataList" :key="item.id">
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 必须初始化数据
      dataList: [
        { id: 1, name: "项目A" },
        { id: 2, name: "项目B" }
      ]
    }
  }
}
</script>

<style>
/* 全局样式 */
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
</style>