vue过滤器在v2.0版本用法

最新推荐文章于 2023-07-04 07:30:34 发布

曲线人

最新推荐文章于 2023-07-04 07:30:34 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签： vue 前端开发移动端

本文链接：https://blog.csdn.net/qq_27596047/article/details/68486021

版权

前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>咨询订单-扁鹊谷</title>
    <link href="css/lib/modal.css" rel="stylesheet" >
    <link href="css/base.css" rel="stylesheet" >
    <link href="css/user.css" rel="stylesheet" >
</head>
<body>
    <div class="container">
        <div class="head">
            <p>
                <a href="user-order.html" class="cur">咨询订单</a><a href="user-shop-order.html">商城订单</a>
            </p>
            <a href="javascript:history.back(-1)"></a>
        </div>
        <div class="tab">
            <ul>
                <li class="cur"><span>未支付</span></li>
                <li><span>已支付</span></li>
            </ul>
            <div class="list">
                <div style="display:block">
                    <dl v-for="list in orderListUnpaid">
                        <dt>
                            <h4 v-text="list.doctorName"></h4>
                            <p>订单时间:<span v-text="list.orderTime"></span></p>
                            <span>预约</span>
                        </dt>
                        <dd>
                            <p>订单号:<span v-text="list.orderId"></span><span class="sp_1" v-text="list.orderStatus"></span></p>
                            <p>总计:￥<span v-text="list.orderMoney"></span>
                                <a class="paly" href="user-order-play.html">支付</a>
                                <span class="del"><a href="javascript:;" class="item-edit-btn" v-on:click.stop="delConfirm(list)"><i></i>删除</a></span>
                            </p>
                        </dd>
                    </dl>
                </div>
                <div>
                    <dl v-for="list in orderListPaid">
                        <dt>
                            <h4 v-text="list.doctorName"></h4>
                            <p>订单时间:<span v-text="list.orderTime"></span></p>
                            <span>预约</span>
                        </dt>
                        <dd>
                            <p>订单号:<span v-text="list.orderId"></span>
                                <a class="sp_1" href="user-order-express.html"><span v-text="list.orderStatus"></span><i></i></a>
                            </p>
                            <p>总计:￥<span v-text="list.orderMoney"></span>
                                <a href="user-order-price.html">查看详情<i></i></a>
                            </p>
                        </dd>
                    </dl>

                </div>
            </div>

        </div>
        
        <div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':showModal}" >
            <div class="md-modal-inner">
                <div class="md-top">
                    <button class="md-close" v-on:click="showModal=false">关闭</button>
                </div>
                <div class="md-content">
                    <div class="confirm-tips">
                        <p id="cusLanInfo" lan="Cart.Del.Confirm">你确认删除此商品吗?</p>
                    </div>
                    <div class="btn-wrap col-2">
                        <button class="btn btn--m" id="btnModalConfirm" v-on:click="delCurrentProduct">是</button>
                        <button class="btn btn--m btn--red" id="btnModalCancel" v-on:click="showModal=false">否</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="md-overlay" id="showOverLay" v-show="showModal"></div>

    </div>

    <script src="js/lib/vue2.min.js"></script>
    <script src="js/lib/vue-resource.min.js"></script>
    <script src="js/lib/zepto.min.js"></script>
    <script src="js/user-order.js"></script>
</body>
</html>

json

{
  "status":0,
  "message":"",
  "result":[
    {
      "orderId":"100001",
      "orderStatus":"正在运送",
      "orderMoney":20,
      "orderTime":"2017-01-22 15:33:43",
      "doctorName":"张1丰"
    },
    {
      "orderId":"100002",
      "orderStatus":"未支付",
      "orderMoney":20,
      "orderTime":"2018-02-22 15:33:43",
      "doctorName":"张2丰"
    },
    {
      "orderId":"100003",
      "orderStatus":"已支付",
      "orderMoney":30,
      "orderTime":"2018-03-22 15:33:43",
      "doctorName":"张3丰"
    },
    {
      "orderId":"100004",
      "orderStatus":"未支付",
      "orderMoney":40,
      "orderTime":"2018-04-22 15:33:43",
      "doctorName":"张4丰"
    },
    {
      "orderId":"100005",
      "orderStatus":"待发货",
      "orderMoney":50,
      "orderTime":"2018-05-22 15:33:43",
      "doctorName":"张5丰"
    }

  ]
}

/**
 * Created by YZH on 17/03/23
 */

var vm = new Vue({
	el:'.container',
	data:{
		orderList:[],
		showModal:false
	},
	mounted:function (){
		this.orderView();
	},
	computed:{  
		orderListUnpaid:function(){  
            		return this.orderList.filter(function(list){  
                		return list.orderStatus == '未支付';  
            		})  
       		}, 
        	orderListPaid:function(){  
           		 return this.orderList.filter(function(list){  
                		return list.orderStatus != '未支付';  
            		})  
        	}
    },  
	filters:{
		Money:function (value){
			return "¥"+value;
		}
	},
	methods:{
		//遍历json文件读取数据
		orderView:function (){
			this.$http.get("data/orderData.json").then(res=>{
				this.orderList = res.body.result;

			})
			$(".tab ul li").click(function (){
				$(this).addClass("cur").siblings().removeClass("cur");
				$(this).parent().next().find("div").eq($(this).index()).show().siblings().hide();
			})
		},
		//改变遮罩层
		delConfirm:function (list){
			this.showModal = true;
			this.currentProduct = list;
		},
		//商品商品
		delCurrentProduct:function (){
			this.showModal = false;
			var index = this.orderList.indexOf(this.currentProduct);
			this.orderList.splice(index,1);
		}

	}
});