vue过滤器小案例

最新推荐文章于 2022-12-27 22:55:49 发布

初来乍到到

最新推荐文章于 2022-12-27 22:55:49 发布

阅读量562

点赞数

分类专栏： Vue 文章标签： vue filter

本文链接：https://blog.csdn.net/weixin_43868692/article/details/85340565

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

当我们请求后台数据时，我们有的就需要用到过滤器了，比如订单状态、性别等。下面就是过滤器的使用小案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="out">
        <h1>过滤器-变换输出形式</h1>
        <ul>
            <li v-for="(item,i) in arr">{{i}}--{{item.name}}-{{item.status | status}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.filter('status',function(item){
        if(item==0){
            return '待支付'
        }else{
            return '订单完成'
        }
    })
    var vm=new Vue({
        el:"#out",
        data:{
            arr:[{name:'衣服',status:0},{name:'帽子',status:1},{name:'AJ鞋子',status:0}]
        }
    })
</script>
</html>