自定义数组，循环展示对象数据，vue3监视数组

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 }

)