微信小程序的wx:for和vue的v-for

写代码的时候，微信小程序的wx:for和vue的v-for，有点搞混了，所以特意举个简单的例子(todos)来区分下。

微信小程序

index.wxml

<view class="list"><view class="item" wx:for="{{todos}}" wx:key="id">{{item.id}}-{{item.title}}</view>
</view>

index.wxss

.list{margin: 50rpx;
}
.item{margin: 25rpx;
}

index.js

Page({data:{todos:[{title:"吃饭",id:"1"},{title:"睡觉",id:"2"},{title:"打豆豆",id:"3"}]}
})

要回忆更多内容，可以到这里看看。

Vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="root"><ul class="list"><li class="item" v-for="(item,index) in todos" :key="item.id">{{item.id}}-{{item.title}}</li></ul></div><script>const app = Vue.createApp({data(){return {todos:[{title:"吃饭",id:"1"},{title:"睡觉",id:"2"},{title:"打豆豆",id:"3"}]}}})app.mount("#root");</script>
</body>
</html>

关于Vue的v-for，更多可以访问这里。

微信小程序的wx:for和vue的v-for相关推荐

微信小程序遍历wx:for,wx:for-item,wx:key
微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法遇到的问题: 第一个坑: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息 ...
微信小程序之wx.getLocation再次授权问题解决
微信小程序之wx.getLocation再次授权问题解决首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) {wx.getL ...
微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key - 1
前言: 微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的 ...
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...
前端技术栈：将微信小程序代码自动转换成 Vue 代码
前段时间做了一个微信小程序,使用了云开发,但是云开发对业务逻辑的限制实在是太多了,因此想将其重构成 uni-app.最近将 wxml 改成 Vue 实在让人头大,因此"偷懒"使用 ...

微信小程序的wx:for和vue的v-for

微信小程序

Vue

微信小程序的wx:for和vue的v-for相关推荐

最新文章

热门文章