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

相关推荐
理想不理想v11 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我12 分钟前
浏览器交互事件汇总
前端·交互
YBN娜26 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=26 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck30 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端