列表渲染
列表渲染是前端开发中常见的需求,在 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 中的表单处理和组件间通信。敬请期待!