Javascript 单击vue js中的多个元素

我正在创建一个功能来隐藏和显示图像缩略图的说明（如果用户单击图像缩略图，说明将显示动画）。我已经在VueJS中学习了关于转换的教程，但不幸的是，只有一个缩略图可以工作，其余的不能。我已在尝试和出错期间删除了脚本。所以，让我们以jquery的脚本为例（伪代码，因为我现在不记得jquery语法）：

一,

二,

jQuery（“#app p”）。单击（函数（）{
警报（p.text）；
});

我们只需要该脚本，

alert（p.text）

具有不同的值，根据用户单击的

，我们不需要为每个

编写脚本

如何在VueJS中执行此操作？简而言之，我不知道如何在VueJS的一个实例上为许多元素应用click事件。

<template>
  <div>
    <p v-for="item in numbers" @click="fun(item)">{{item}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      numbers:[1,2,3,4,5]
    }
  },
  methods:{
    fun:function(number){
      alert(number);
    }
  }
}
</script>

{{item}
导出默认值{
数据（）{
返回{
编号：[1,2,3,4,5]
}
},
方法：{
乐趣：功能（数字）{
警报（编号）；
}
}
}

我在MVC和MVVM之间是不同的。

你想要这样吗

var V=新的Vue({
el:“应用程序”，
数据：{
项目：[
{name:'Test1'，desc:'Test1 desc'，show:false}，
{name:'Test2'，desc:'Test2 desc'，show:false}，
{name:'Test3'，desc:'Test3 desc'，show:false}，
]
}
});

{{item.name}
：{{item.desc}
共享现场演示或任何小提琴？在您给定的代码中，没有涉及VUEJ。对不起，我没有任何小提琴。我希望jQuery脚本能够解释我要做的事情。简而言之，我对如何将一个vue js实例应用于许多元素感到困惑。我将尝试这段代码，并结合vue js中的转换指南。非常感谢。如果我卡住了，我会回来的。谢谢，如果vue不知道有多少子元素（项目），该怎么办？我的意思是，span元素是通过传统方式（从php循环）而不是从数组javascript循环来呈现的。共享您从php获得的数据吗？忽略此部分“@click=“showtail”`。那不行，是的。它比jQuery更难，也更复杂。jQuery只需要很少的脚本就可以解决这个问题，而且faaaar更简单。或者jQuery和Vue js是为不同的目的创建的？如果数组包含10000个数字呢？一些简单的演示不应该使用Vue，但是当您的代码更复杂时，MVVM框架将对您有很大帮助。我认为这个框架的最大贡献是分离前端和后端，这样前端工程师可以做比过去更多的事情。
<template>
  <div>
    <p v-for="item in numbers" @click="fun(item)">{{item}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      numbers:[1,2,3,4,5]
    }
  },
  methods:{
    fun:function(number){
      alert(number);
    }
  }
}
</script>