xinggevip

Vue2.x Cli3.x 简单搜索
HelloWorld.vue<template> <div class="hell...
扫描右侧二维码阅读全文
31
2019/05

Vue2.x Cli3.x 简单搜索

HelloWorld.vue

<template>
  <div class="hello">
    <h1>博客总览</h1>
    <input type="text" name="search" placeholder="搜索" v-model="search">
    <div id="bigbg" v-for="blog in filteredBlogs">
      <h3>{{blog.title | to-uppercase}}</h3>
      <p>{{blog.body | snippet}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    // msg: String
  },
  data(){
    return{
      blogs:[],
      search:""
    }
  },
  created(){
    this.$http.get('http://jsonplaceholder.typicode.com/posts')
    .then(function(data){
      console.log(data);
      this.blogs = data.body.slice(0,10);
    })
  },
  computed:{
    filteredBlogs:function(){
      return this.blogs.filter((blog) =>{
        return blog.title.match(this.search);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#bigbg{
  max-width: 800px;
  margin: 10px auto;
  background: #333;
  color: aliceblue;
  text-align: left;
  padding: 20px;
}
</style>
Last modification:May 31st, 2019 at 09:43 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment