在 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

上面的这些例子，是基本的。在我的项目中，我将根据之前在 radio 中选择的值显示不同的部分。我对 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>