vue中选中多个选项，并且改变选中的样式

有N多个模板，选中多个选项，并且改变样式；

HTML模板区域：

<template>
 <h3>请选择模板</h3>
        <ul class="templates-style">
          <li
            class="filter-nav"
            v-for="(item, index) in touristList"
            :key="index"
            :class="{ active: selected.indexOf(item) != -1 }"
            @click="ChooseTemplate(index, item)"
          >
            <div class="bg-box">
              <span>{{ item.name }}</span>
            </div>
          </li>
        </ul>
  </template>

css样式：

.filter-nav{
    border: 2px solid #fff;
  }
  .active {
    border: 2px solid rgb(112, 231, 108);
  }
  .templates-style {
    margin-top: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    li {
      list-style: none;
      width: 120px;
      height: 200px;
      background: yellow;
      margin-right: 10px;
    }
  }

script中的数据

data中定义：
 selected: [],
methods:{
   ChooseTemplate(index, item) {
       if (this.selected.indexOf(item) !== -1) {
         // 匹配到数据， 取消
        this.selected.splice(this.selected.indexOf(item), 1);
       } else {
       // 匹配不到， 添加到数组中
         this.selected.push(item);
       }
      console.log(JSON.parse(JSON.stringify(this.selected)));
    },
}