VUE @change 和 @click的区别

在给单选框添加事件的时候出现了一个问题

看代码:

<template>
    <div >
       <input type="radio" @click="test"  v-model="userLoginForm.code" value="1" id="psd"><label for="psd"></label>学生
       <input type="radio" @click="test"  v-model="userLoginForm.code" value="2" id="psd"><label for="psd"></label>管理员
    </div>
</template>

import { reactive } from 'vue'

export default {
  name: 'Login',
  setup () {
    const userLoginForm = reactive({
      code: ''
    })
    const test = async () => {
      alert(userLoginForm.code)
    }
    return {
      userLoginForm,
      test
    }
  }
}
</script>

结果:

我点击的是管理员预期弹出是2结果弹出是1

把@click改成@change事件之后

结果:

这回就正常了

原因: @change 是在内容改变的时候触发 @click是在点击的时候触发，此时内容还没有改变