Vue之filters--v-bind

Vue之filters–v-bind样式显示以及内容显示

目前有一个列表，类似微博粉丝关注。
列表中有两种情况：已关注和关注，需要在加载页面时进行样式区分。

html代码
<div id="vue">
    <div v-for="item in list">
        <p :class="item | filtersColor">{{item|filtersContent}}</p>
    </div>
</div>

css代码
.red{
    color:red;
    border:1px solid #e93030;
}
.grey{
    color:grey;
    border:1px solid #eee;
}

//通过过滤器来判断列表中每一项的显示颜色
//通过过滤器来判断内容显示"关注"与"已关注"  
//type为0 '已关注'  type为1 '关注'
js代码  
var v= new Vue({
    el:"#vue",
    data:{
      list:[{
              type:0
          },
          {
              type:1
          },
          {
              type:0
          },
          {
              type:0
          }]
    },

    filters:{
        filtersColor:function(v){
            return v.type !=0 ? "red" : "grey"
        },
        filtersContent:function(v){
            return v.type !=0 ? "关注" : "已关注"
        }   
    }
});