处理VueJS和jQuery的点击

Question

我是Vue的新手，我对某件事情很怀疑。那么，我对Vue and jQuery处理点击事件的方式有疑问。对我而言，在这一刻，jQuery似乎更容易实现。

jQuery中

我们只是做到这一点：

HTML：

<div class="jquery-radio"> 
Radio 1 <input type="radio" name="radio" class="choose-radio" value="Radio1" checked> 
<br> 
Radio 2 <input type="radio" name="radio" class="choose-radio" value="Radio2"> 

jQuery的

$('.choose-radio').click(function() { 
$('.choose-radio:checked').val() == 'Radio1' ? alert('Radio 1') : 
$('.choose-radio:checked').val() == 'Radio2' && alert('Radio 2 '); 
}); 

所以，我的疑问是。如何使用Vue实现这一点？我试图做到这一点，但正如我所说，jQuery的似乎更简单，因为代替添加@click="myMethod()"我只是做我想做的，选择的元素（类）$('.choose-radio);

HTML：

<div class="jquery-radio"> 
Radio 1 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked @click="showRadio1()"> 
<br> 
Radio 2 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" @click="showRadio2()"> 

Vue公司

var app = new Vue ({ 
    el: ".jquery-radio", 
    methods: { 
     showRadio1: function() { 
      alert("Show 1"); 
     }, 
     showRadio2: function() { 
      alert("Show 2"); 
     } 
    } 
    }); 

Check Fiddle

上面这些例子是基本的。在我的项目中，我将根据之前在收音机中选择的值显示不同的部分。我真的很迷惑Vue。

希望你们能为我澄清这些信息！

Answer 1

您可以添加相同的处理程序并传入事件对象，您稍后可以使用它来检索当前元素。下面是一个工作示例：

var app = new Vue ({ 
 
    el: ".jquery-radio", 
 
    methods: { 
 
     show: function(event) { 
 
      var value = event.target.value 
 
      
 
      console.log(value) 
 
     } 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 

 
<div class="jquery-radio"> 
 
    Radio 1 
 
    <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked @click="show($event)"> 
 
<br> 
 
    Radio 2 
 
    <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" @click="show($event)"> 
 
</div>

PS：还有，你的jQuery的方法是远远没有达到最佳，因为如果存在有.choose-radio类的更多元素它可能会产生错误。你需要的是这样的：

$('.choose-radio').click(function() { 
    var value = $(this).val() // value of the selected object 
}); 

Answer 2

这是一个非常不同的思维方式。用Vue你想改变数据，让Vue为你处理DOM操作。我会使用v-model并基于此切换部分的可见性。

new Vue({ 
 
    data: { 
 
    section: 'Radio 1' 
 
    } 
 
}).$mount('#app')

label { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="app"> 
 
    <label><input name="section" type="radio" v-model="section" value="Radio 1"> One</label> 
 
    <div v-if="section === 'Radio 1'"> 
 
    Radio One Is Selected! 
 
    </div> 
 

 
    <label><input name="section" type="radio" v-model="section" value="Radio 2"> Two</label> 
 
    <div v-if="section === 'Radio 2'"> 
 
    Radio Two Is Selected! 
 
    </div> 
 

 
    <label><input name="section" type="radio" v-model="section" value="Radio 3"> Three</label> 
 
    <div v-if="section === 'Radio 3'"> 
 
    Radio Three Is Selected! 
 
    </div> 
 
</div>