javascript - onclick vue js中的多个元素

Question

我正在创建一个功能来隐藏和显示图像缩略图的描述(如果用户单击图像缩略图，描述将显示为动画)。我已经按照 VueJS 中有关过渡的教程进行操作，但不幸的是，只有一个缩略图有效，其余的则无效。我已经在 try and errors 期间删除了脚本.那么，以jquery的脚本为例(暂时想不起jquery语法的伪代码):

<div id="app">
   <p> 1 </p>
   <p> 2 </p>
</div>

jQuery("#app p").click(function(){
      alert(p.text);
   });

我们只需要那个脚本和alert(p.text)有不同的值(value)基于 <p>该用户点击了，我们不需要为每个 <p> 编写脚本

如何在 VueJS 中做到这一点？简而言之，我很困惑如何为许多元素应用一个带有点击事件的 VueJS 实例。

Answer 1

你想要这样吗

var V = new Vue({
  el:"#app",
  data:{
    items:[
      {name:'Test1',desc:'test1 Desc',show:false},
      {name:'Test2',desc:'test2 Desc',show:false},
      {name:'Test3',desc:'test3 Desc',show:false},
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
   <div v-for="item in items">
    <span @click="item.show = !item.show">{{item.name}}</span>
    <span class="" v-if="item.show">: {{item.desc}}</span>
   </div>
</div>