vue.js实现数组中不存在则插入
时间: 2024-02-18 22:04:20 浏览: 236
Vue.js中数组变动的检测详解
在Vue.js中,可以使用Vue.set()方法来实现数组中不存在则插入的操作。具体实现如下:
```html
<template>
<div>
<p v-for="num in nums" :key="num">{{ num }}</p>
</div>
</template>
<script>
export default {
data() {
return {
nums: [1, 2, 3],
newNum: 4,
};
},
mounted() {
if (!this.nums.includes(this.newNum)) {
this.nums.push(this.newNum);
Vue.set(this.nums, this.nums.length - 1, this.newNum);
}
},
};
</script>
```
在上述代码中,首先定义了一个数组nums和一个变量newNum。然后在mounted()方法中判断newNum是否已经存在于nums数组中,如果不存在,则调用push()方法将其插入到数组中。接着使用Vue.set()方法通知Vue.js更新数组,确保其响应式。最后使用v-for指令遍历数组,并输出每个元素的值。
阅读全文