vue.filter简单案列

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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">

//此处的status的值相当于item.status的值,然后传入function(value)中进行处理

    Vue.filter('status',function(value){

        if(value==0){

            return '待支付'

        }else{

            return '订单完成'

        }

    })

    var vm=new Vue({

        el:"#out",

        data:{

            arr:[{name:'衣服',status:0},{name:'帽子',status:1},{name:'AJ鞋子',status:0}]

        }

    })

</script>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 13,143评论 0 13
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,146评论 0 2
  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 7,593评论 0 3
  • 不知怎的,看见别人骑自行车上学,心里也不由自主的羡慕起来了,也想骑自行车上学,虽然我家也有,可是已经是"老古董"了...
    孤城落日阅读 46评论 0 0
  • 最近几天我开始学手绘,启发点是V先生说的,一天做一件小事,坚持下来就是对自己最好的交代。我并没有想过要成为某个领域...
    不夜侯_阅读 4,571评论 0 0