SOURCE

var app=new Vue({
  el:'#app',
  data:{
    numIndex:0,
    list:[
      {name:'苹果',num:0},
      {name:'香蕉',num:0},
      {name:'橘子',num:0},
      {name:'橙子',num:0},
      {name:'草莓',num:0},
      {name:'西瓜',num:0},
    ],
    sortedList:[]
  },
  methods:{
  	changeNum:function(item,index){
      	/*每条数据只有两种状态，选中和未选中，使用属性num的值进行判断，0代表初始值，非0代表已经操作过*/
      	let that=this;
  			if(item.num == 0){
          that.numIndex++;
          item.num=that.numIndex;
        }else{
          
          that.list.forEach(function(val){
            	if(val.num != 0 && item.num < val.num){
                val.num--;
              }
          })
          item.num=0;
          that.numIndex--;
        }
		},
    sortByNum(obj1,obj2){//使用对象属性进行排序
      var val1 = obj1.num;
      var val2 = obj2.num;
      if (val1 < val2) {
          return -1;//第一个值排在第二个值后面就返回-1
      } else if (val1 > val2) {
          return 1;
      } else {
          return 0;
      }
    },
    getResult(){//获取排序后的结果
      let that=this;
      that.sortedList=[].concat(that.list);
      that.sortedList.sort(that.sortByNum);
    }
	}
})

<div id="app">
  <h3 class='tc'>请把下面的水果按照你的喜爱程度进行排序 [序号排序]</h3>
  <ul class='sort'>
    <li v-for='(item,index) in list' @click='changeNum(item,index)'>
      <span v-if='item.num == 0'></span>
      <span v-else>{{item.num}}</span>
      {{item.name}}
    </li>
  </ul>
  
  <div class="tc" @click='getResult'>查看排序结果</div>
  <ul class='sort'>
    <li v-for='(item,index) in sortedList'>{{item.name}}</li>
  </ul>
  
</div>

#app{width:60%;margin:20px auto;}
.tc{text-align:center;}
.sort li{list-style:none;border:1px solid #eee; margin-bottom:10px;cursor:pointer;transition:all .2s;padding:5px;background:#efefef;}
.sort li:hover{background:#fefefe;}
.sort li span{float:left;width:20px;height:20px; border:1px solid #eee;margin-right:5px;background:#fff;text-align:center;line-height:20px;}