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 中的表单处理和组件间通信。敬请期待!

相关推荐
行板Andante9 分钟前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam41 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8501 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的3 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句3 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6663 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js