<template>
<!-- 自定义指令的参数如果是字符串需要加单引号 -->
<div id="show-blogs" v-theme:column="'narrow'">
<h1>博客总览</h1>
<input type="text" placeholder="搜索" v-model="search"/>
<div v-for="blog in filteredBlogs" class="single-blog">
<!-- 自定义指令v-rainbow 在main.js中定义 -->
<!-- 使用管道后面的过滤器 to-uppercase -->
<router-link v-bind:to="'/blog/'+ blog.objectId">
<h2 v-rainbow>{{blog.title | to-uppercase}}</h2> </router-link>
<article>{{blog.content | snippet }}</article>
</div>
</div>
</template>
<script>
export default {
name: 'show-blogs',
data(){
return {
blogs:[],
search:""
}
},
created(){
const query = Bmob.Query("blog");
var blogsArray = [];
query.find().then(res => {
this.blogs = res;
});
},
computed:{
//进行过滤的方法
filteredBlogs:function(){
return this.blogs.filter((blog)=>{
return blog.title.match(this.search);
})
}
},
//局部的过滤器和自定义指令
filters:{
"to-uppercase":function(value){
return value.toUpperCase();
}
},
directives:{
//这不是一个方法，是一个绑定值
"rainbow":{
bind(el,binding,vnode){
el.style.color = "#"+Math.random().toString(16).slice(2,8);
}
}
}
}
</script>
<style>
#show-blogs{
max-width: 800px;
margin: 0 auto;
}
.single-blog{
padding:20px;
margin:20px 0;
box-sizing:border-box;
background:#eee;
border:1px dotted #aaa;
}
#show-blogs a{
color:#444;
text-decoration:none;
}
input[type="text"]{
padding:8px;
width:100%;
box-sizing:border-box;
}
</style>
