我正在创建一个功能来隐藏和显示图像缩略图的描述(如果用户单击图像缩略图,描述将显示为动画)。我已经按照 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 实例。
最佳答案
你想要这样吗
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>
关于javascript - onclick vue js中的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47406738/