vue jsの複数の要素をクリックする

Question

イメージサムネイルの説明を非表示にして表示する機能を作成しています（ユーザーがイメージサムネイルをクリックすると説明がアニメーション化されます）。私はVueJSのチュートリアルに移行についてはすでに従っていましたが、残念ながら1つのサムネイルしか動作せず、残りの部分は動作しません。私はすでに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の1つのインスタンスを多くの要素に対してクリックイベントで適用する方法が混乱しています。

Answer 1

<template> 
    <div> 
    <p v-for="item in numbers" @click="fun(item)">{{item}}</p> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     numbers:[1,2,3,4,5] 
    } 
    }, 
    methods:{ 
    fun:function(number){ 
     alert(number); 
    } 
    } 
} 
</script> 

私はMVCとMVVMの違いがあります。

Answer 2

は、あなたがこの

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>