uniapp 数据操作

uniapp 数据操作

数据绑定

在uniapp中，数据绑定通过双花括号{{}}实现，类似于Vue.js的语法。在模板中直接使用数据变量，数据变化会自动更新视图。

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

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

数据更新

通过this.setData或直接赋值更新数据。注意在方法中修改数据需要使用this指向当前实例。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

列表渲染

使用v-for指令渲染列表数据，需指定唯一的key属性以提高性能。

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

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' }
      ]
    }
  }
}
</script>

条件渲染

通过v-if和v-show控制元素的显示与隐藏。v-if是动态添加或移除DOM元素，v-show是通过CSS控制显示。

<template>
  <view v-if="isVisible">显示内容</view>
  <view v-show="isActive">激活内容</view>
</template>

表单数据绑定

使用v-model实现表单元素与数据的双向绑定，支持输入框、单选、多选等表单控件。

<template>
  <input v-model="inputValue" placeholder="请输入内容" />
</template>

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

数据存储

uniapp提供本地存储API，包括同步和异步方法，适用于持久化存储少量数据。

// 异步存储
uni.setStorage({
  key: 'key',
  data: 'value',
  success: function() {
    console.log('存储成功')
  }
})

// 同步存储
uni.setStorageSync('key', 'value')

数据请求

通过uni.request发起网络请求获取远程数据，支持Promise和回调函数两种方式。

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  success: (res) => {
    console.log(res.data)
  },
  fail: (err) => {
    console.error(err)
  }
})

数据监听

使用watch监听数据变化，适用于需要在数据变化时执行特定逻辑的场景。

export default {
  data() {
    return {
      searchText: ''
    }
  },
  watch: {
    searchText(newVal, oldVal) {
      console.log('搜索文本变化:', newVal)
    }
  }
}

计算属性

通过computed定义计算属性，基于现有数据计算出新数据，具有缓存特性。

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName
    }
  }
}