我正在创建一个功能来隐藏和显示图像缩略图的描述（如果用户单击图像缩略图，描述将显示为动画）。我已经遵循了 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)根据其具有不同的值<p>该用户点击了，我们不需要为每个用户编写脚本<p>
如何在 VueJS 中做到这一点？简而言之，我很困惑如何将一个 VueJS 实例与许多元素的单击事件一起应用。
你想要这样吗
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
