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

相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品