当前位置：首页 > uni-app

uniapp 数据渲染

2026-03-05 03:57:25uni-app

数据渲染的基本方法

在uniapp中，数据渲染通常通过模板语法和数据绑定实现。最基础的方式是在页面或组件的<template>部分使用双大括号{{}}插入数据。

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp'
    }
  }
}
</script>

列表渲染

对于数组类型数据的渲染，可以使用v-for指令。该指令可以遍历数组或对象，生成重复的DOM结构。

<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Orange' }
      ]
    }
  }
}
</script>

条件渲染

通过v-if、v-else-if和v-else指令可以实现条件渲染。这些指令会根据表达式的真假值来添加或移除DOM元素。

uniapp 数据渲染

<template>
  <view>
    <view v-if="show">显示内容</view>
    <view v-else>隐藏内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

样式绑定

动态绑定样式可以通过:style和:class实现。这种方式允许根据数据变化动态改变元素的样式。

<template>
  <view :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    动态样式
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 14
    }
  }
}
</script>

表单输入绑定

使用v-model指令可以实现表单输入和应用状态之间的双向绑定。

uniapp 数据渲染

<template>
  <view>
    <input v-model="inputValue" placeholder="请输入内容" />
    <text>输入的内容是：{{ inputValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

性能优化技巧

对于大型列表的渲染，可以考虑使用虚拟列表技术。uniapp提供了<unicloud-db>组件和<recycle-list>组件来优化长列表性能。

<template>
  <recycle-list>
    <cell v-for="(item, index) in longList" :key="index">
      {{ item.content }}
    </cell>
  </recycle-list>
</template>

数据更新机制

在uniapp中，直接修改数组或对象可能不会触发视图更新。需要使用this.$set方法或返回新数组/对象的方式来确保响应式更新。

// 正确方式
this.$set(this.list, 0, {name: 'New Item'})

// 或者
this.list = [...this.list, {name: 'New Item'}]

异步数据渲染

处理异步数据时，可以在生命周期钩子或方法中获取数据后赋值给响应式变量。

<script>
export default {
  data() {
    return {
      asyncData: null
    }
  },
  async created() {
    const res = await uni.request({url: 'api/data'})
    this.asyncData = res.data
  }
}
</script>