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の選択に関連して、スタイルの内容を変更する場合は、以前の記事を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。