点击事件中的this|click事件与change事件|v-model

2024-04-22 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 点击事件中的this|click事件与change事件|v-model

原生js

  <input type="radio" value="xxx" name="sex" onclick="ccc(this)" />男
  <input type="radio" value="yyy" name="sex" onclick="ccc(this)" />女
  <script>
    function ccc(_this) {
      console.log(_this);
      console.log(_this.value);
    }
  </script>

可以看到this指向的是当前标签DOM节点

Vue

 <div id="app">
        <input type="radio" value="xxx" name="sex" @click="ccc(this)" />男
        <input type="radio" value="yyy" name="sex" @click="ccc(this)" />女
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                ccc(_this){
                    console.log(_this);
                }
            }
        })
    </script>

而这里的Vue却是指向的window对象.

使用 v-model指令绑定,会自动绑定获取表单输入的值

<div id="app">
        <input v-model="rad" type="radio" value="xxx" name="sex" @click="ccc()" />男
        <input v-model="rad" type="radio" value="yyy" name="sex" @click="ccc()" />女

        <select v-model="selected" @change="check()">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                selected:"",
                rad:""
            },
            methods: {
                ccc(){
                    console.log(this.rad);
                },
                check(){
                    console.log(this.selected);
                }
            }
        })
    </script>