微信小程序的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></v
·
写代码的时候，微信小程序的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，更多可以访问这里。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献19条内容
所有评论(0)