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>

处理单击VueJS和jQuery

2 个答案: