原生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赋值之后,再触发事件打印.结果便正确了
