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

最新推荐文章于 2023-12-04 14:14:35 发布

richest_qi

最新推荐文章于 2023-12-04 14:14:35 发布

阅读量2.6k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qzw752890913/article/details/117367634

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

写代码的时候，微信小程序的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，更多可以访问这里。

richest_qi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序的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:
复制链接

扫一扫