点击事件中的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>
   

但是发现–>第一次点击触发时,并没有值.且值取错误,男应是xxx , 却打印出yyy

解决方法 ,点击事件换为@change="ccc()" , 当值发生改变时触发.

探究原因

• 第一次点击男的时候,是先触发点击事件,打印值,初始值为空,即打印了一个空白,再为其赋值上value,当前rad值为xxx
• 再次点击女 , 也是先触发点击事件,打印值,值是什么呢,上次点击男赋值的xxx,便将 xxx 打印出来了,再执行赋值为yyy
• 当事件改为change事件后
• 只有当值改变后,才会触发事件,也就是先为rad赋值之后,再触发事件打印.结果便正确了.
  

参考

表单输入绑定v-model
HTML DOM 事件
JavaScript this 关键字
javascript中的this与prototype，原型理解