当前位置：首页 > uni-app

uniapp 数据渲染

2026-02-06 02:15:01uni-app

uniapp 数据渲染方法

在uniapp中，数据渲染主要通过数据绑定和列表渲染实现，以下是常用的方法：

数据绑定

使用双大括号{{}}语法进行数据绑定，将数据动态显示在页面上：

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

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

列表渲染

使用v-for指令渲染数组或对象数据：

uniapp 数据渲染

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

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

条件渲染

使用v-if、v-else-if和v-else指令根据条件渲染内容：

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

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

计算属性

使用计算属性处理复杂逻辑的数据渲染：

uniapp 数据渲染

<template>
  <view>{{ reversedMessage }}</view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

样式绑定

动态绑定样式类或内联样式：

<template>
  <view :class="{ active: isActive }">样式绑定</view>
  <view :style="{ color: activeColor }">内联样式</view>
</template>

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

表单输入绑定

使用v-model实现表单输入的双向绑定：

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

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