vue数组筛选(vue数组操作方法)

导语：Vue基础入门，第19节，数组筛选，使用属性计算对数组进行过滤

上一节我们一起学习了Vue基础入门，第18节，数组筛选，使用属性监视对数组进行过滤。这一节我们学习 第19节，数组筛选，使用属性计算对数组进行过滤。

1、定义数组数据，字段包含id name age address

data: {    searchWord: ,    persons: [        {: , : , : 19, : },        {: , : , : 29, : },        {: , : , : 16, : },        {: , : , : 26, : },        {: , : , : 38, : }    ],    seachPersons: []},

2、定义一个搜索框

<input class= type= v-model:value=>

3、定义一个展示列表，这里采用ul -> li形式进行循环输出

<ul>    <li class= v-for= :key=>        {{person.id}} > {{person.name}} > {{person.age}} > {{person.address}}    </li></ul>

4、定义计算属性，方法为persons_1，

this.persons.filter((p)：js的命令，过滤器的意思

p.name.indexOf(Value) != -1：判断name里面有没有value字符串，如果-1代表没有

computed: {    persons_1() {        return this.persons.filter((p) => {            return p.name.indexOf(this.searchWord) != -1        })    }},

5、结果展示：

6、代码截图

免责声明:本站部份内容由优秀作者和原创用户编辑投稿，本站仅提供存储服务，不拥有所有权,不承担法律责任。若涉嫌侵权/违法的，请反馈，一经查实立刻删除内容。本文内容由快快网络小姬创作整理编辑！