使用vue写一个代码,功能为查询表格某个字段后,返回另一个字段的数组
时间: 2023-06-06 16:06:23 浏览: 84
在vue中给后台接口传的值为数组的格式代码
好的,这是一个技术问题,可以回答。您可以通过以下代码实现:
html:
```html
<template>
<div>
<input type="text" v-model="searchValue" placeholder="请输入要查询的内容">
<button @click="search">查询</button>
<div>{{result}}</div>
</div>
</template>
```
js:
```javascript
<script>
export default {
data () {
return {
searchValue: '',
dataList : [
{name: '张三', age: 20},
{name: '李四', age: 22},
{name: '王五', age: 24},
{name: '赵六', age: 26},
{name: '钱七', age: 28},
],
result: ''
}
},
methods:{
search() {
let tempArr = [];
this.dataList.forEach((item, index) => {
if (item.name === this.searchValue) {
tempArr.push(item.age);
}
})
this.result = tempArr.join(',')
}
}
}
</script>
```
在data中定义一个搜索的值`searchValue`和一个结果的值`result`,以及一个数据列表`dataList`。通过`v-model`绑定搜索值,通过`@click`触发查询按钮,执行`search()`方法。`search()`函数遍历数据列表,如果数据中某个项的名称等于搜索值,就将这个条目的年龄放入临时数组中。最后把临时数组转成字符串,赋值给结果变量。
阅读全文