UniApp 基础教程：第三篇

有问题请咨询gpt2023-11-03 7:06

列表渲染

列表渲染是前端开发中常见的需求，在 UniApp 中可以通过 v-for 来实现。

使用 v-for 渲染列表

vue 复制代码

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

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

事件处理

UniApp 提供了一套事件处理机制，包括用户交互事件和自定义事件。

用户交互事件

最常见的用户交互事件是点击事件 @tap。

vue 复制代码

<template>
  <view>
    <button @tap="handleTap">Click Me!</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log('Button clicked');
    }
  }
}
</script>

自定义事件

可以使用 $emit 触发自定义事件。

vue 复制代码

<!-- ChildComponent.vue -->
<template>
  <view @tap="$emit('myEvent', 'some payload')">
    Tap me
  </view>
</template>

在父组件中接收自定义事件：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <view>
    <child-component @myEvent="handleMyEvent"></child-component>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMyEvent(payload) {
      console.log(`Event received with payload: ${payload}`);
    }
  }
}
</script>

总结

本篇中，我们详细介绍了列表渲染和事件处理两个重要的概念。掌握了这些，你就可以更好地构建动态和交互丰富的 UniApp 应用了。

更多信息，请参考官方文档。

下一篇我们将深入讲解 UniApp 中的表单处理和组件间通信。敬请期待！