012.Vue3入门,数组变化侦听,实时在界面显示变化后的数据
1、代码如下:
<template> <h3>数组变化侦听</h3> <button @click="addListHandle">添加数据</button> <ul> <li v-for="(item,index) of names" :key="index">{{ item }}</li> </ul> <button @click="concatHandle">按钮</button> <h3>数组1</h3> <div v-for="(item,index) of nums1" :key="index">{{ item }}</div> <h3>数组2</h3> <div v-for="(item,index) of nums2" :key="index">{{ item }}</div> </template> <script> export default { data() { return { names: ["张三", "李四", "王五"], nums1: [1, 2, 3], nums2: [11, 12, 13] } }, methods: { addListHandle() { this.names = this.names.concat(["赵六"]) }, concatHandle() { this.nums1 = this.nums1.concat(this.nums2) } } } </script>
2、效果如下