需求1：考生点击科目 限制所选科目的个数
分析：循环渲染列表，用一个空数组接收选中的项，取消一个在这个数组里删除掉对应的项，判断数组长度如果大于3，return结束程序
代码：
template
<div class="chosesub">选择选科 <span>需选择三门学科</span></div>
<ul class="content">
<li v-for="(item, index) in touristList" @click="onStorage(item, index)"
:class="{ active: rSelect.indexOf(item) != -1 }" :key="item.id">
<div>{{ item.name }}</div>
</li>
</ul>数据：
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：
<div class="chosesub">意向报考专业志愿： <span class="small">注：登记考生我校在录取过程中尽量满足其前三专业志愿，请按照优先次序，依次点击选项进行排序</span>
</div>
<ul class="content content1">
<li v-for="(item, index) in touristList1" @click="onStorage1(item, index)"
:class="{ active1: rSelect1.indexOf(item) != -1 }" :key="index">
<div class="list"> <span :class="[rSelect1.indexOf(item) != -1?'active2':'num']"><span v-if="item.flag" class="num1">{{item.id}}</span></span>{{ item.name }}</div>
</li>
</ul>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<this.touristList1.length;j++){
if(value == this.touristList1[j]){
this.touristList1[j].flag = false;//取消的项不再显示标识
}
}
} else {
this.rSelect1.push(value); //选中添加到数组里
}
for(var i = 0;i<this.rSelect1.length;i++){
for(var j=0;j<this.touristList1.length;j++){
if(this.rSelect1[i] == this.touristList1[j]){
this.touristList1[j].id = i+1//渲染的标识
this.touristList1[j].flag = true;//选中的项添加标识
}
}
}
},
