效果圖：

1、訂單分類

<template><div class="hello"><h1>{{ msg }}</h1><div class="cak-order"><ul class="cak-menu"><li v-for="(item,index) in menu" :class="{on:index==active}" @click="switchItem(item,index)">{{ item.text }}</li></ul><p v-for="(item,index) in alllist">商品名：{{ item.text }}、價(jià)格：{{ item.money }}、數(shù)量：{{ item.num }}、狀態(tài)：{{ item.status }}</p></div><Evaluate></Evaluate></div> </template><script>import Evaluate from '@/components/Evaluate'export default {name: 'HelloWorld',data () {return {msg: 'vue-order',active:0,menu:[{text:'全部訂單'},{text:'代付款'},{text:'待發(fā)貨'},{text:'待收貨'},{text:'待評(píng)價(jià)'}],alllist:[],//全部訂單pay:[], //代付款send:[], //代發(fā)貨collect:[], //待收貨evaluate:[], //待評(píng)價(jià) lists:[{text:'商品1',money:4,num:4,status:0}, //status 0 待付款，1待發(fā)貨，2待收貨，3待評(píng)價(jià){text:'商品2',money:3,num:1,status:1},{text:'商品3',money:4,num:2,status:2},{text:'商品4',money:7,num:6,status:0},{text:'商品4',money:7,num:6,status:3},{text:'商品4',money:7,num:6,status:0},{text:'商品4',money:7,num:6,status:3},{text:'商品3',money:4,num:2,status:2},{text:'商品3',money:4,num:2,status:2},{text:'商品4',money:7,num:6,status:3},]}},components: {Evaluate},created(){// 加載全部訂單this.alllist = this.listsfor(var i =0;i<this.lists.length;i++){//代付款if(this.lists[i].status == 0){this.pay.push(this.lists[i])}//代發(fā)貨else if(this.lists[i].status == 1){this.send.push(this.lists[i])}//待收貨else if(this.lists[i].status == 2){this.collect.push(this.lists[i])}//待評(píng)價(jià)else if(this.lists[i].status == 3){this.evaluate.push(this.lists[i])}} },methods: {switchItem(item,index){this.active = indexswitch(index){case 0:this.alllist = this.listsconsole.log("全部訂單")break;case 1:this.alllist = this.payconsole.log("代付款")break;case 2:this.alllist = this.sendconsole.log("待發(fā)貨")break;case 3:this.alllist = this.collectconsole.log("待收貨")break;case 4:this.alllist = this.evaluateconsole.log("待評(píng)價(jià)")break; }}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 {font-weight: normal; }ul {list-style-type: none;padding: 0; }li {display: inline-block;margin: 0 10px; }a {color: #42b983; } .cak-menu li{background-color: #eee;padding: 5px 10px;cursor:pointer; } .cak-menu li.on{color:#fff;background-color: pink; } </style>

2、評(píng)分

<template><ul><li v-for="(name, index) in list"><div class="score"><span>{{name}}：</span><i v-for="($item,$index) in 5" @click="washingCarScore(index,$index)" :class="{full:$index<=saveIndex[index]}"></i><span>{{num[index]}}分</span></div></li></ul> </template> <script>export default {data() {return{saveIndex: [-1, -1, -1],list: ['商品','物流','客服'],num: [0, 0, 0],}},methods:{washingCarScore(type, index){this.$set(this.saveIndex, type, index)this.$set(this.num, type, index+1)// $set(target,key,value) target:對(duì)象、數(shù)組； key:數(shù)組中第幾個(gè)值； value:key改變的值==》 刪除數(shù)組target中第key個(gè)值，添加新的value來代替/*console.log(this.saveIndex)console.log(this.num)*/}}} </script> <style>.score i{display: inline-block;width: 24px;height: 24px; background: url(../../static/img/start-default.png); /*初始圖片*/ background-size: 100%; } .score .full{background-image: url(../../static/img/start-full.png);} /*active圖片*/ </style>

?

轉(zhuǎn)載于:https://www.cnblogs.com/CaktyRiven/p/8274758.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的订单分类和评分--vue.js学习笔记2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。