将下面代码改写成vue3写法 getValue(arr, item) { for (var i = 0; i < arr.length; i++) { if (item == arr[i].dictValue) { return arr[i].dictLabel } } },
时间: 2024-02-10 15:06:02 浏览: 151
浅谈vue.js中v-for循环渲染
在 Vue 3 中,我们可以使用 Composition API 来重写这段代码:
```javascript
import { ref } from 'vue'
function getValue(arr, item) {
const dictLabel = ref('')
arr.forEach(dict => {
if (item == dict.dictValue) {
dictLabel.value = dict.dictLabel
}
})
return dictLabel.value
}
// 调用示例
const dictList = [
{ dictValue: '1', dictLabel: '男' },
{ dictValue: '2', dictLabel: '女' }
]
const gender = getValue(dictList, '1') // gender = '男'
```
在这个示例代码中,我们使用了 `ref` 创建了一个响应式变量 `dictLabel`,用来存储找到的 `dictLabel` 值。然后使用 `forEach` 方法循环 `arr` 数组,找到与 `item` 相等的 `dictValue` 值,将对应的 `dictLabel` 值赋值给 `dictLabel` 变量。最后返回 `dictLabel.value`。
阅读全文