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)根据用户点击的<p>具有不同的值，我们不需要为每个<p>编写脚本

如何在VueJS中执行此操作？简而言之，我很困惑如何将vueJS的一个实例与click事件一起应用于许多元素。

Answer 1

 structure(list(s100.Probeset = structure(c(1L, 2L, 4L, 3L, 5L
 ), .Label = c("202055_at", "203063_at", "206284_x_at", "210734_x_at", 
 "221915_s_at"), class = "factor"), s101.Probeset = structure(c(2L, 
 4L, 3L, 1L, 5L), .Label = c("202055_at", "203248_at ", "206284_x_at", 
 "210734_x_at", "212522_at"), class = "factor"), s102.Probeset = structure(c(1L, 
 3L, 4L, 5L, 2L), .Label = c("202055_at", "205453_at", "210734_x_at", 
"219957_at", "220661_s_at"), class = "factor"), s10.Probeset =  structure(c(5L, 
1L, 2L, 3L, 4L), .Label = c("202055_at", "203063_at", "211503_s_at", 
"214689_at", "219957_at"), class = "factor")), .Names = c("s100.Probeset", 
"s101.Probeset", "s102.Probeset", "s10.Probeset"), row.names = c(NA, 
-5L), class = "data.frame")

我在MVC和MVVM之间存在差异。

Answer 2

你想这样吗

＆＃13;

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},
    ]
  }
});

＆＃13;

<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>

＆＃13;

在vue js中点击多个元素

2 个答案: