vue模糊查询

前端 专栏收录该内容
10 篇文章 0 订阅

vue当中第一种方案:(不推荐)

/* templeta */
<div id="app-4">

    <input type="text" @input="handleInput">
  <ul>
      <li v-for="pika in pikachu">{{pika}}</li>
  </ul>
</div>

/* script */

<script>
var app4 = new Vue({
    el: '#app-4',
    data: {
       age:18,
        baidu:"www.baidu.com",
        pikachu:[
            "aaaaa",
            "bbbbb",
            "ccccc",
            "ddddd"
        ],
        pikachu1:[
            "aaaaa",
            "bbbbb",
            "ccccc",
            "ddddd"
        ]
    },
    methods:{
        handleInput(ev){

            this.pikachu=this.pikachu1.filter(
                item=>item.includes(ev.target.value))
        }
        }


})
</script>

第二种:(推荐)

/* templeta */
<div id="app">

    <input type="text" v-model="mytext">

    <ul>
        <li v-for="pika in mymethod()">{{pika}}</li>
    </ul>
</div>
/* script */
<script>
    var app4 = new Vue({
        el: '#app',
        data: {


            pikachu:[
                "aaaaa",
                "bbbbb",
                "ccccc",
                "ddddd"
            ],
            mytext:''

        },
        methods:{
            mymethod(){

                return this.pikachu.filter(
                    item=>item.includes(this.mytext))
            }
        }


    })
</script>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值