在Vue js中点击多个元素 [英] onclick multiple elements in vue js

问题描述

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

<p>1 </p><p>2 </p>
jQuery("#app p").click(function(){警报(p.text)；});

我们只需要那个脚本，alert(p.text) 根据用户点击的

有不同的值，我们不需要为每个

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

解决方案

你想要这样吗

var V = new Vue({el:"#app",数据:{项目:[{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="应用程序"><div v-for="项目中的项目"><span @click="item.show = !item.show">{{item.name}}</span><span class="" v-if="item.show">: {{item.desc}}</span>

I am creating a feature to hide and show description of image thumbnails (if user click the image thumbnail, the description will be shown animated). I already followed tutorial in VueJS about transition but unfortunately only one thumbnail works and the rest don't. I already removed the script during my try and errors. So, let take script of jquery as an example (pseudo code since I can't recall jquery syntax for now):

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

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

We only need that script and alert(p.text) has different value based on which <p> that user clicked and we dont need to write script for each <p>

How to do it in VueJS ? in nutshell I am confused how to apply one instance of VueJS with click event on it for many elements.

解决方案

Do you want like this

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>

这篇关于在Vue js中点击多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！