const arr=['15','0']这个用vue3去重
时间: 2023-10-11 20:08:20 浏览: 43
在 Vue 3 中,可以使用 `reactive` 函数创建响应式对象,然后使用 `computed` 函数创建一个计算属性,该计算属性的值为数组去重后的结果。示例代码如下:
```
<template>
<div>
<ul>
<li v-for="(value, index) in uniqueArr" :key="index">{{ value }}</li>
</ul>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
arr: ['15', '0'],
});
const uniqueArr = computed(() => Array.from(new Set(state.arr.map(Number))));
return {
uniqueArr,
};
},
};
</script>
```
在上面的代码中,首先使用 `reactive` 函数创建 `state` 对象,其中包含一个数组 `arr`。然后使用 `computed` 函数创建一个计算属性 `uniqueArr`,该计算属性的值为 `state.arr` 数组去重后的结果。在模板中使用 `v-for` 指令循环渲染去重后的数组中的元素。
需要注意的是,在使用 `computed` 函数时,只需要将需要计算的值定义为函数即可,不需要像 `watch` 函数一样显式地去监听数据的变化。另外,由于 `computed` 函数返回的是一个响应式对象,所以可以直接在模板中使用计算属性的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)