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