HTML
<div v-for="(item, index) in dataList" :key="index">
<span>{{ item.title }}:</span>
<span>{{ dataInfo[item.content] }}</span>
</div>
JS
需要展示的键值对放入数组中
let dataList = [
{
title: 'data1',
content: 'data'
},
{
title: 'data2',
content: 'content'
},
{
title: 'data3',
content: 'message'
}
]
对象信息
let dataInfo = {
data: '数据',
content: '内容',
message: '信息'
}
vue3监视数组
vue3监视数据
watch(
multipleSelectionList.value,
() => {
totalPrice.value = multipleSelectionList.value.reduce((prev, item) => {
return (prev += item.credit_amount * 1)
}, 0)
}
)
这样写 修改 multipleSelectionList.value = []之后不会再触发监视的事件，需求修改为
监视数组的长度或者深度监视，监视的数据一定要写成回调形式
watch(
() => multipleSelectionList.value,
() => {
totalPrice.value = multipleSelectionList.value.reduce((prev, item) => {
return (prev += item.credit_amount * 1)
}, 0)
},
{ deep: true }
)
