Vue.js技术问询：在v-for循环的polygon元素上添加isActive动态类名

嘿，我懂你现在的困扰啦——想给<polygon>元素同时设置note.content_type的动态类和基于isActive的激活状态类，又怕破坏原来的动态类绑定，对吧？其实Vue的class绑定语法支持混合多种形式，很容易实现这个需求，给你两种靠谱的写法：

方法一：数组语法（直观易读） #

Vue的:class可以接受一个数组，数组里同时放动态字符串类和条件对象类，这样两者不会冲突：

<polygon 
  v-if="note.content_type == 'link'" 
  points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434" 
  fill="#989898" 
  :class="[note.content_type, { active: isActive }]" 
  :id="note.id" 
/>

这种写法的好处是清晰，一眼就能看到：既有来自note.content_type的动态类，又有当isActive为true时才会加上的active类。

方法二：对象语法（统一用对象管理） #

如果你更习惯用对象来管理所有类，也可以用动态属性名的方式把note.content_type加进去，记得用方括号把它包起来：

<polygon 
  v-if="note.content_type == 'link'" 
  points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434" 
  fill="#989898" 
  :class="{ [note.content_type]: true, active: isActive }" 
  :id="note.id" 
/>

这里的[note.content_type]: true表示只要这个值存在（并且是有效的类名字符串），就会把它作为类名加上，和后面的active条件类互不影响。

额外提示：独立控制每个note的激活状态 #

如果你想让每个note的激活状态是独立的（而不是全局的isActive），记得把isActive加到每个note对象里，比如你的notes数据可以改成这样：

notes: [
  { 
    id: 1, 
    xpos: 100, 
    ypos: 200, 
    content_type: 'link', 
    isActive: false // 每个note独立的激活状态
  },
  // 其他note...
]

然后在polygon上加上点击事件来切换状态：

<polygon 
  ...
  :class="[note.content_type, { active: note.isActive }]" 
  @click="note.isActive = !note.isActive"
/>

这样就能完美实现你想要的效果啦，既保留了原来的动态类，又能根据激活状态加上active类~

内容的提问来源于stack exchange，提问作者adamprocter