微信小程序 wx:for遍历循环使用实例解析

下面是关于“微信小程序 wx:for遍历循环使用实例解析”的详细攻略。

一、wx:for概述

在微信小程序中,我们经常需要在页面上展示列表数据。wx:for是一种循环渲染数据的方式,可以用来遍历一个数组,并将数组中的每个元素渲染到页面上。

二、wx:for使用方法

<view wx:for="{{array}}" wx:key="*this">{{item}}</view>

上面的代码中,array是你要遍历的数组名;item是数组中当前遍历到的元素。wx:key用于指定列表中的每个项目的唯一标识符,必须指定,如果不指定会有警告提示。

三、wx:for示例1

下面是一个简单的wx:for的示例。先展示一下数组的内容:

// js文件
Page({
  data: {
    fruits: [
      {name: '苹果', price: '2.5'},
      {name: '香蕉', price: '1.5'},
      {name: '橘子', price: '3.0'}
    ]
  }
})

在page中使用wx:for循环遍历数组,将每个元素的名称和价格都渲染到页面上:

<!-- wxml文件 -->
<view wx:for="{{fruits}}" wx:key="name">
  <text>{{item.name}}</text>
  <text>{{item.price}}元/斤</text>
</view>

上面的代码中,wx:key="name"指定了每个元素的唯一标识符为name。

四、wx:for示例2

下面是一个稍微复杂一些的wx:for的示例。首先,展示一下数组的内容:

// js文件
Page({
  data: {
    books: [
      {name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas', id: 1},
      {name: '深入浅出Node.js', author: '朴灵', id: 2},
      {name: '你不知道的JavaScript', author: 'Kyle Simpson', id: 3}
    ]
  },
  deleteBook: function(e) {
    var id = e.currentTarget.dataset.id;
    var books = this.data.books.filter(function(v) {
      return v.id != id;
    });
    this.setData({
      books: books
    });
  }
})

在页面中使用wx:for循环遍历数组,将书名、作者和删除按钮都渲染到页面上,同时给删除按钮绑定一个事件,根据书籍id从数组中删除对应的书籍:

<!-- wxml文件 -->
<view wx:for="{{books}}" wx:key="id">
  <text>书名:{{item.name}}</text>
  <text>作者:{{item.author}}</text>
  <button data-id="{{item.id}}" bindtap="deleteBook">删除</button>
</view>

上面的代码中,wx:key="id"指定了每个元素的唯一标识符为id,在绑定删除事件时,使用dataset可以获取到当前书籍的id。

以上就是关于“微信小程序 wx:for遍历循环使用实例解析”的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 wx:for遍历循环使用实例解析 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript中的History历史对象

    当我们在浏览器中访问一个网页时,浏览器会自动记录下访问过的历史记录,这些历史记录在浏览器中可以用JavaScript的History对象进行访问和操作。下面是JavaScript中的History对象的详细讲解及相关示例说明。 History对象 History对象用来操作浏览器的历史记录,它保存着用户在当前窗口打开的所有页面的URL信息,可以通过Histo…

    JavaScript 2023年5月27日
    00
  • javascript的动态加载、缓存、更新以及复用(一)

    JavaScript 动态加载、缓存、更新以及复用(一) JavaScript 的动态加载、缓存、更新以及复用是优化前端性能的重要手段。下面将为你详细讲解如何实现。 动态加载 JavaScript 的动态加载可以提高网站的性能,并且在某些情况下可以实现更好的网站交互体验。 在 HTML 文件中动态加载 JavaScript 文件 可以通过在 HTML 文件中…

    JavaScript 2023年5月27日
    00
  • js简单判断移动端系统的方法

    判断移动端系统是JS中非常常见的一个需求,下面给出几种判断方式: 方法一:根据navigator.userAgent字符串进行判断 移动端设备的 UA(UserAgent)字符串中,都会包含操作系统的信息,因此我们可以通过解析 UA 字符串来判断设备使用的操作系统。其中一些常见的 UA(UserAgent)字符串包括: Android:/Android/i …

    JavaScript 2023年6月10日
    00
  • JS版网站风格切换实例代码

    当你想为你的网站添加夜间模式或其他风格切换功能时,你可以使用JavaScript编写代码来实现。下面是一个JavaScript版本的网站风格切换实例代码,以及详细的操作步骤。 实现方法 HTML 首先,我们需要在HTML中添加用于切换风格的按钮,以及用于切换后替换网页风格的样式表。例如,在<head>标签中添加两个样式表: <head&gt…

    JavaScript 2023年6月11日
    00
  • JavaScript 数组常见操作技巧

    JavaScript 数组常见操作技巧 JavaScript 中的数组是非常常见和重要的数据结构之一,常用于存储和处理一系列的数据。在实际的开发中,经常需要对数组进行各种各样的操作,以下是 JavaScript 数组常见的操作技巧: 创建数组 在 JavaScript 中,可以通过以下方式创建数组: 直接量方式 直接将元素放在方括号中,以逗号分隔 var a…

    JavaScript 2023年5月18日
    00
  • JavaScript程序设计之JS调试

    JavaScript程序设计之JS调试完整攻略 为什么需要JS调试 在JavaScript编程中,难免会出现一些错误,例如页面无法渲染、逻辑错误等。这些错误可能会让我们的程序不能正常运行。因此,我们需要JS调试来帮助我们排除错误并保证程序的正常运行。 JS调试的工具 浏览器的调试器 浏览器内置了很多调试工具,包括控制台(console)、断点调试(debug…

    JavaScript 2023年5月18日
    00
  • 深浅拷贝,温故知新

    1、深拷贝 1.1、概念 对象的深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用(指向相同的底层值)的副本。 因此,当你更改源或副本时,可以确保不会导致其他对象也发生更改;也就是说,你不会无意中对源或副本造成意料之外的更改。 在深拷贝中,源和副本是完全独立的。深拷贝与其源对象不共享引用,所以对深拷贝所做的任何更改都不会影响源对象。 1.2、实现方式: …

    JavaScript 2023年5月11日
    00
  • Javascript Boolean prototype 属性

    以下是关于JavaScript Boolean.prototype属性的完整攻略。 JavaScript Boolean.prototype属性 JavaScript Boolean.prototype属性是Boolean对象的原型属性,它允许您向所有Boolean对象添加属性和方法。该属性是动态的,可以通过Boolean对象的实例访问。 下面是一个使用Bo…

    JavaScript 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部