vueで複数のオプションを選択し、選択したスタイルのインスタンスコードを変更します。

1:HTML:

 <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>
        <div>{{item.sex}}</div>
       </li>
 </ul>

2:dataで定義する

rSelect:[],
 touristList:[
       {
        name:"  ",
        sex:" ",
        id:0
       },
       {
        name:"  ",
        sex:" ",
        id:1
       },
       {
        name:"   ",
        sex:" ",
        id:2
       },
       {
        name:"   ",
        sex:" ",
        id:3
       },
       {
        name:"  ",
        sex:" ",
        id:4
       },

      ],

3:methods中

onStorage(value,e){
     console.log(this.rSelect.indexOf(value));
     if (this.rSelect.indexOf(value) !== -1) {
      this.rSelect.splice(this.rSelect.indexOf(value), 1); //  
     } else {
      this.rSelect.push(value);//        
     }
     console.log(this.rSelect);
    },

締め括りをつける
ここでvueの中から複数のオプションを選択し、選択したスタイルのインスタンスコードを変更する記事を紹介します。vueの選択に関連して、スタイルの内容を変更する場合は、以前の記事を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。