博客总览

< template>
< div class=“show-blog”>
< h1 >博客总览< /h1>
< input type=“text” placeholder=“搜索” v-model=“search”>
< div id=“single-blog” v-for=“y in filteredBlogs”>
< h2 v-rainbow>{{y.title |to-uppercase}}< /h2>
< article >
{{y.body|sinppt}}
< /article>
< /div>
< /div>
< /template>

< !–请求数据 created 返回的数据条数.slice (0,10)为10条数据0~9 -->
< script>
export default {
name: ‘show-blog’,
data(){
return{
blogs:[],
search:""
}
},
created(){
this.$http.get(‘http://jsonplaceholder.typicode.com/posts’)
.then(function(data){
this.blogs= data.body.slice(0,5);
})
},
computed:{
filteredBlogs:function(){
return this.blogs.filter((y)=>{
return y.title.match(this.search);
})
}
}
}
< /script>

< style scoped>
.show-block{
max-width:800px;
margin:0 auto;
}
#single-blog{
padding:20px;
margin:20px 0;
box-sizing:border-box;
background:#eee;

}
< /style>

在main.js中自定义v-rainbow,to-uppercase,sinppt
自定义指令相关信息：https://cn.vuejs.org/v2/guide/custom-directive.html
//自定义指令
Vue.directive(‘rainbow’,{
bind(el,binding,vnode){
el.style.color="#"+Math.random().toString(16).slice(2,8);
}
})

Vue.filter(“to-uppercase”,function(value){
return value.toUpperCase();
})

///显示的内容
Vue.filter(“sinppt”,function(value){
return value.slice(0,20)+"…";
})