Vue.js Vue模板-当列表中项目的id等于变量时动态添加类名

我有一个很大的svg地图，需要根据用户输入突出显示某个部分

svg本质上是一个单文件组件

模板：

svg version=“1.1”xmlns=”http://www.w3.org/2000/svg"
xmlns:xlink=”http://www.w3.org/1999/xlink“viewBox=“0 350 600 450”>

脚本：

 module.exports = {
        name: 'map',
        props:['userSelect'],
        methods: {
          checkProp: function() {
            console.log(userSelect) 
//prop works as expected
          }
        }

我需要的是，当id与userSelect匹配时，我应该将另一个名为“class2”的类添加到现有的“class1”类中。 有人有想法吗？

您可以使用或

：

例如：

<template>
svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 350 600 450">
        <g>
<path id="X" :class="setClass('X')" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........" />
<path id="Y" :class="setClass('Y')" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
<path id="Z" :class="setClass('Z')" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
        </g>
    </svg>
</template>

---

我将创建一个组件并使用计算属性，以便缓存该值：

MyPath组件

<template>
  <path v-bind="$attrs" :class="pathClass"/>
</template>

<script>
export default {
  props: ['userSelect'],
  computed() {
    pathClass() {
      return this.$el.id === this.userSelect;
    }
  }
}
</script>

导出默认值{
道具：['userSelect']，
计算（）{
路径类（）{
返回此。$el.id==this.userSelect；
}
}
}

然后，地图模板变为：

<template>
svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 350 600 450">
        <g>
<my-path id="X" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........" />
<my-path id="Y" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
<my-path id="Z" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
        </g>
    </svg>
</template>

svg version=“1.1”xmlns=”http://www.w3.org/2000/svg"
xmlns:xlink=”http://www.w3.org/1999/xlink“viewBox=“0 350 600 450”>

您可以像这样向类中添加逻辑：

<template>
svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 350 600 450">
        <g>
<my-path id="X" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........" />
<my-path id="Y" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
<my-path id="Z" :user-select="userSelect" class="class1" d="4,522.87L164.95,523.31L166.15,524.54L167.29,524.57L169.47,525.42L170.72,525.22L172.59,523.7........"/>
        </g>
    </svg>
</template>