Vuejs2 在Vue中，是否仍要在绑定模板中的属性时引用元素？

在模板作用域中，是否存在引用元素本身的变量，如$this或$el

而不是

<template>
    <div @click="$emit('xxx')" :class="{active:mode=='xxx'}" something_for_xxx></div>
    <div @click="$emit('yyy')" :class="{active:mode=='yyy'}" something_for_yyy></div>
    <div @click="$emit('zzz')" :class="{active:mode=='zzz'}" something_for_zzz></div>
</template>

为了避免忘记更改其中一个模式名，我们可以编写如下内容吗

<template>
    <div mode="xxx" @click="$emit($this.mode)" :class="{active:mode==$this.mode}" something_for_xxx></div>
    <div mode="yyy" @click="$emit($this.mode)" :class="{active:mode==$this.mode}" something_for_yyy></div>
    <div mode="zzz" @click="$emit($this.mode)" :class="{active:mode==$this.mode}" something_for_zzz></div>
</template>

解决方法：

<template>
    <div v-for"mode_ in ["xxx"] @click="$emit(mode_)" :class="{active:mode==mode_}" something_for_xxx></div>
    <div v-for"mode_ in ["yyy"] @click="$emit(mode_)" :class="{active:mode==mode_}" something_for_yyy></div>
    <div v-for"mode_ in ["zzz"] @click="$emit(mode_)" :class="{active:mode==mode_}" something_for_zzz></div>
</template>

这是在循环中构建元素的典型情况：


Vue.component（'my-component'）{
模板：“#我的组件”，
道具：{
模式：字符串，
},
数据（）{
返回{
模式：['xxx'，'yyy'，'zzz']，
};
},
});
新Vue({
el:“#应用程序”，
数据：{
模式：“xxx”，
},
方法：{
日志（事件）{
this.mode=事件；
console.log（事件）；
}
},
});
.active{
颜色：绿色；
}
.指针{
光标：指针；
}

{{currentMode}}
在事件处理程序中，您始终可以访问
$event.target
来访问元素（请参见），但对于内联绑定（如
：class
），您不能，因为元素尚未呈现

我建议您改变循环使用每个值的方式


是的，但当事情还在起草阶段时，编写循环似乎不是很好。但是我意识到你可以使用v-for=“x in['a']”来定义局部变量=D。@somebody4对不起，我不确定你的评论是什么意思。例如，xxx yy zzz的元素可能不完全相同。它们可能只是共享一些且仅共享一些公共属性/逻辑。
<div v-for="elMode in ['xxx', 'yyy', 'zzz']"
     @click="$emit('click', elMode)" :class="{active:mode==elMode}"/>