64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
||
<ciy-header title="Vue3 Proxy"></ciy-header>
|
||
<view class="ciy-card">
|
||
<view class="title">Proxy响应式数据</view>
|
||
<view class="content">
|
||
<view>相比Vue2，Vue3更少的考虑$set绑定问题。</view>
|
||
<view class="txt-center py4">
|
||
<button @tap="addstart" class="btn">新增到头部</button>
|
||
<button @tap="addend" class="btn">新增到底部</button>
|
||
</view>
|
||
<view v-for="(item,index) in list" :key="index" style="display: flex;align-items: center;gap: 6px;margin: 16px 0;">
|
||
<button @tap="edit(index)" class="btn def">更新</button>
|
||
<button @tap="del(index)" class="btn def">删除</button>
|
||
<view style="flex:1;">
|
||
{{item.id}}|{{item.name}}|{{item.ext}}|{{item.ext2}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: []
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
addstart() {
|
||
var edited = {
|
||
id: 5,
|
||
name: Math.random().toFixed(2),
|
||
ext2: '头部ext2'
|
||
};
|
||
this.list.unshift(edited);
|
||
},
|
||
addend() {
|
||
var edited = {
|
||
id: 5,
|
||
name: Math.random().toFixed(2),
|
||
ext: '底部ext'
|
||
};
|
||
this.list.push(edited);
|
||
},
|
||
edit(index) {
|
||
// this.$set(this.list, index, json.edited);
|
||
this.list[index] = {
|
||
id: 6,
|
||
name: this.lang('tabbar.me') + Math.random().toFixed(2),
|
||
ext2: 'ass'
|
||
};
|
||
console.log(this.list);
|
||
},
|
||
del(index) {
|
||
this.list.splice(index, 1);
|
||
}
|
||
}
|
||
}
|
||
</script> |