点击列表限制选择个数并且给选中的项目按点击顺序标识排序

需求1：考生点击科目 限制所选科目的个数

分析：循环渲染列表，用一个空数组接收选中的项，取消一个在这个数组里删除掉对应的项，判断数组长度如果大于3，return结束程序

代码：

template

 选择选科 需选择三门学科
 

     

          {{ item.name }}
     
 

数据：

touristList: [
                    {
                        name: "物理",
                        id: 0,
                    },
                    {
                        name: "化学",
                        id: 1,
                    },
                    {
                        name: "生物",
                        id: 2,
                    },
                    {
                        name: "历史",
                        id: 3,
                    },
                    {
                        name: "地理",
                        id: 4,
                    },
                    {
                        name: "政治",
                        id: 5,
                    },
                ],
rSelect:[],

methods:

 onStorage(value, e) {
                    if (this.rSelect.indexOf(value) !== -1) {
                        this.rSelect.splice(this.rSelect.indexOf(value), 1); //取消
                    } else {
                        if (this.rSelect.length > 2) {
                            alert("最多选择3个");
                            return;
                        }
                        this.rSelect.push(value); //选中添加到数组里
                    }
                },

升级款：对选中的数据进行标识排序，未选中的不标识

 代码：

template：

意向报考专业志愿： 注：登记考生我校在录取过程中尽量满足其前三专业志愿，请按照优先次序，依次点击选项进行排序
            
            

                

                     {{item.id}}{{ item.name }}
                
            

data：

  touristList1: [
                    {
                        name: "工科实验班（大数据技术）",
                        id: '',
                        flag:false,
                    },
                    {
                        name: "工科实验班（大数据技术）",
                        id: '',
                        flag:false,
                    },
                    {
                        name: "工科实验班（大数据技术）",
                        id: '',
                        flag:false,
                    },
                    {
                        name: "工科实验班（大数据技术）",
                        id: '',
                        flag:false,
                    },

                ],
                 rSelect1: [],

methods:

  onStorage1(value, e) {
                    if (this.rSelect1.indexOf(value) !== -1) {
                        this.rSelect1.splice(this.rSelect1.indexOf(value), 1); //取消
                        for(var j=0;j