Javascript v-用于使操作应用于所有div

之前，我问了一个关于在Vue中删除自定义截断过滤器的问题。请看这里的问题：

但是，我忽略了提到我使用的是v-for循环，当我将鼠标悬停在一个div上时，我注意到循环中的所有div都应用了相同的操作。我不确定如何只针对悬停在上面的div。这是我的模板：

 <div id="tiles">
    <button class="tile" v-for="(word, index) in shuffled" @click="clickWord(word, index)" :title="word.english">
      <div class="pinyin">{{ word.pinyin }}</div>
      <div class="eng" @mouseover="showAll = true" @mouseout="showAll = false">
        <div v-if="showAll">{{ word.english }}</div>
        <div v-else>{{ word.english | truncate }}</div>
      </div>
    </button>
  </div>

---

如果你知道Vue，我将非常感谢你的建议。谢谢

为了做到这一点，您不能使用计算属性（正如我最初在您链接的我的答案中所建议的那样），因为您需要了解您所处的上下文。也就是说，如果将

showAll

属性应用于每个实例，则可以使用过滤器。如果在数据模型中预先声明此属性，则该属性将是被动的，您可以在mouseover和mouseout上分别切换每个项目

模板：

<div id="app">
  <div id="tiles">
    <div class="tile" v-for="(word, index) in shuffled" :title="word.english">
      <div class="pinyin">{{ word.pinyin }}</div>
      <div class="eng" @mouseover="word.showAll = true" @mouseout="word.showAll = false">
        {{ word.english | truncate(word) }}
      </div>
    </div>
  </div>
</div>

{{word.pinyin}
{{word.english}截断（单词）}

js:

newvue({
el:“#应用程序”，
数据（）{
返回{
洗牌：[
{english:'here'，showAll:false}，
{英语：'are'，showAll:false}，
{英语：'那里'，showAll:false}，
{英语：'words'，showAll:false}
],
当前索引：0，
roundClear:错，
单击单词：“”，
matchFirstTry：没错，
}
},
过滤器：{
截断：函数（值、字）{
console.log（word）
设长度=3；
如果（word.showAll | | value.length要执行此操作，则不能使用计算属性（正如我最初在您链接的我的答案中所建议的），因为您需要了解所处的上下文。也就是说，如果您对每个实例应用
showAll
属性，则可以使用筛选器。如果您在数据模型中预先声明此属性，则该属性将是被动的，您可以在mouseover和mouseout上分别切换每个项目

模板：

<div id="app">
  <div id="tiles">
    <div class="tile" v-for="(word, index) in shuffled" :title="word.english">
      <div class="pinyin">{{ word.pinyin }}</div>
      <div class="eng" @mouseover="word.showAll = true" @mouseout="word.showAll = false">
        {{ word.english | truncate(word) }}
      </div>
    </div>
  </div>
</div>


{{word.pinyin}
{{word.english}截断（单词）}

js:

newvue({
el:“#应用程序”，
数据（）{
返回{
洗牌：[
{english:'here'，showAll:false}，
{英语：'are'，showAll:false}，
{英语：'那里'，showAll:false}，
{英语：'words'，showAll:false}
],
当前索引：0，
roundClear:错，
单击单词：“”，
matchFirstTry：没错，
}
},
过滤器：{
截断：函数（值、字）{
console.log（word）
设长度=3；
如果（word.showAll | | | value.length在您的示例中，v-for生成的每个按钮都使用
showAll
来确定是否显示
word.english
值的完整文本。这意味着每当
.eng
类div的
mouseover
事件触发时，相同的
sho对于每个按钮，wAll
属性都设置为true


我将用最初设置为
null
的
showWordIndex
属性替换
showAll
布尔值：

data() {
  showWordIndex: null,
},

然后在模板中，将
showWordIndex
设置为
mouseover
处理程序中单词的
index
（以及
mouseleave
处理程序中的
null
）：


{{拼音}
{{english}
{{english | truncate}}
在您的示例中，
showAll
用于v-for生成的每个按钮，以确定是否显示
word.english
值的完整文本。这意味着每当任何
.eng
类div的
mouseover
事件触发时，都会显示相同的
showAll
属性每个按钮都设置为true


我将用最初设置为
null
的
showWordIndex
属性替换
showAll
布尔值：

data() {
  showWordIndex: null,
},

然后在模板中，将
showWordIndex
设置为
mouseover
处理程序中单词的
index
（以及
mouseleave
处理程序中的
null
）：


{{拼音}
{{english}
{{english | truncate}}

<button v-for="(word, index) in shuffled" :key="index">
  <div class="pinyin">{{ word.pinyin }}</div>
  <div 
    class="eng" 
    @mouseover="showWordIndex = index" 
    @mouseout="showWordIndex = null" 
  >
    <div v-if="showWordIndex === index">{{ word.english }}</div>
    <div v-else>{{ word.english | truncate }}</div>
  </div>
</button>