用vue实现输入搜索功能

主要用到js的filter方法和match方法和vue的computed属性实现

<template>
  <div id="app">
    <input type="text" v-model="searchVal">
      <div class="ctn"  v-for="(item,i) in search">
        <h3>{{item.title}}h3>
        <p>{{item.body}}p>
      div>
   div>
template>

<script>
export default {
  name: 'App',
  data(){
    return {
      searchVal:"",
      blog:[]
    }
  },
  created(){
    this.$axios.get("http://jsonplaceholder.typicode.com/posts").then(res=>{
      console.log(res);
      this.blog = res.data;
    });
  },
  computed:{
    search(){
      var item = this.blog.filter(ele=>{
        if(ele.title.match(this.searchVal)){
          return ele;
        }
      })
       return item;
    }
  }
}
script>

 

转载于:https://www.cnblogs.com/luguankun/p/10832027.html