xinggevip

Vue2.x Cli3.x 局部指令和过滤器
ShowBlogs<!-- 1.模板 --> <template> <!-- 只...
扫描右侧二维码阅读全文
31
2019/05

Vue2.x Cli3.x 局部指令和过滤器

ShowBlogs

<!-- 1.模板 -->
<template>
  <!-- 只能有一个根标签 -->
  <div id="showblogs" v-them:column="'narrow'">
    <h1>博客总览</h1>
    <input type="text" placeholder="搜索" v-model="search">
    <div v-for="blog in filterBlogs" class="single-blog">
        <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
        <article>
          <p>{{blog.body | snipped}}</p>
        </article>
    </div>
  </div>

</template>
<!-- 2.行为 -->
<script>

export default {
  name: 'ShowBlogs',
  components: {
    
  },
  data () {
    return {
      //
      blogs:[],
      search:""
    }
  },
  created(){
    this.$http.get('http://jsonplaceholder.typicode.com/posts')
    // this.$http.get('./../public/static/posts.json')
    .then(function(data){
      console.log(data);
      this.blogs = data.body.slice(0,10);
    })
  },
  computed:{
      filterBlogs:function(){
        return this.blogs.filter((blog) =>{
          return blog.title.match(this.search);
        })
      }
  },
  // 局部过滤器
  filters:{
    "to-uppercase":function(value){
      return value.toUpperCase();
    },
    // toUpperCase(value){
    //   return value.toUpperCase();
    // },
    "snipped":function(value){
      return value.slice(0,100) + "...";
    }
  },
  // 局部自定义指令
  directives:{
    // 无参
    'rainbow':{
      bind(el,binding,vnode){
            el.style.color = "#" + Math.random().toString(16).slice(2,8);
      }
    },
    // 有参
    'them':{
      bind(el,binding,vnode){
        if(binding.value == 'wide'){
        el.style.maxWidth = "1048px";
        } else if(binding.value == 'narrow'){
          el.style.maxWidth = "560px";
        };
        if(binding.value = 'column'){
          el.style.background = "#6677cc";
          el.style.padding = "20px";
        };
      }
    }
  }
}
</script>
<!-- 3.样式 -->
<style>
#showblogs{
    max-width: 800px;
    margin: 0px auto;
}
.single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
}
</style>
Last modification:May 31st, 2019 at 09:19 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment