UniApp 基础教程:第三篇

列表渲染

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

相关推荐
爱学习的茄子4 分钟前
Function Call:让AI从文本生成走向智能交互的技术革命
前端·深度学习·openai
aol1216 分钟前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
南雨北斗6 分钟前
vue3 attribute绑定
前端
一枚前端小能手7 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖9 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper10 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友11 分钟前
阶段四:实战(项目开发能力)
前端·rust
小高00711 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
子兮曰12 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
即兴小索奇16 分钟前
Google AI Mode 颠覆传统搜索方式,它是有很大可能的
前端·后端·架构