Vue之filters--v-bind

最新推荐文章于 2025-10-30 13:40:14 发布

原创最新推荐文章于 2025-10-30 13:40:14 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue

个人小总结专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用Vue.js中的过滤器实现列表项的样式和内容动态变化。通过判断列表项的状态，改变其显示的颜色及文本内容，实现已关注和关注的不同样式区分。

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 ? "关注" : "已关注"
        }   
    }
});