VUE中搜索栏输入字符，实时更新输出的数据

VUE中搜索栏输入字符，实时更新输出的数据

<template>
  <div>
      <!-- 引入了vant搜索插件 -->
       <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
        />
      </form>
      <!-- 将computed计算属性的数据进行循环，输入文字时，实时将数据更新到页面 -->
      <div v-for="item in filiter"
        :key="item.cinemaId">
        <p>{{item.name}}</p>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Toast } from 'vant';
Vue.use(Search);
import {mapState} from 'vuex';
import {instance1} from "@/utils/http.js"
export default {
  data () {
    return {
       value:'',    //输入的值
       data:[]      //请求的电影院的数据
    }
  },
  methods: {
  },
  computed:{
    ...mapState("city",["cityId"]),
    filiter(){    //过滤数据，找出数据的名字包含输入的字符，符合标准直接输出数据
      return this.data.filter(item=>{
        return item.name.includes(this.value) || item.name.toUpperCase().includes(this.value.toUpperCase())
      })
    }
  },
  created(){    //请求影院的数据
    instance1.get(`/gateway?cityId=${this.cityId}&ticketFlag=1&k=8091523`,{
      headers:{
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res=>{
      this.data = res.data.data.cinemas
      console.log(this.data)
    })
  }
}
</script>

<style lang="scss" scoped>

</style>