您现在的位置是：网站首页> 小程序设计
小程序Vue数据绑定例子
- 小程序设计
- 2021-07-04
- 737人已阅读
摘要
<template>
<view>
<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
{{'第' + item + '条数据'}}
</view>
<u-loadmore :status="status" />
</view>
</template>
<script>
export default {
data() {
return {
status: 'loadmore',
list: 15,
page: 0
}
},
onReachBottom() {
if(this.page >= 3) return ;
this.status = 'loading';
this.page = ++ this.page;
setTimeout(() => {
this.list += 10;
if(this.page >= 3) this.status = 'nomore';
else this.status = 'loading';
}, 2000)
}
}
</script>
<style scoped>
.wrap {
padding: 24rpx;
}
.item {
padding: 24rpx 0;
color: $u-content-color;
font-size: 28rpx;
}
</style>
{{数据}}是在HTML中
：是在属性中绑定