uniapp列表实现方式 v-for
<template>
<view>
<view class="line" v-for="item in list" :key="" @click="itemClick(key)">
<image class="imageStype" src="../../static/"></image>
<text class="textHellow">{{}}</text>
</view>
<view class="line" v-for="(item,i) in list" :key="i" @click="itemClick(key)">
<image class="imageStype" src="../../static/"></image>
<text class="textHellow">{{}}</text>
</view>
<view class="line" v-for="(item,title,i) in list" :key="i" @click="itemClick(key)">
<image class="imageStype" src="../../static/"></image>
<text class="textHellow">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
title: 0
}, {
title: 1
}, {
title: 2
}]
}
},
methods: {
itemClick(ii) {
// setInterval(() => {
// ().forEach((item)=>{
// +=1
// })
// }, 2000)
setTimeout(() => {
Array.from(this.list).forEach((item) => {
item.title += 1
})
}, 2000)
}
},
beforeDestroy() {
}
}
</script>
<style>
.imageStype {
width: 120rpx;
height: 120rpx;
margin-left: 40rpx;
}
.line {
margin-top: 20rpx;
display: flex;
flex-direction: row;
padding-top: 40rpx;
padding-bottom: 40rpx;
width: 670rpx;
margin-left: 40rpx;
border: 2rpx solid gray;
border-radius: 16rpx;
background-color: aliceblue;
box-shadow: 8rpx 8rpx 4rpx 0 gray;
}
.textHellow {
margin-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
}
</style>