vue实现radio互斥

vue实现radio互斥(自己理解)

今天在学习v-modell的时候很神奇发现radio没有name但是实现了互斥

<input type="radio"  id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio"  id="male" value="男" v-model="sex">
<label for="male">男</label><br>

起初我以为是vue自己帮我加上了name,但是f12之后发现vue并没有加上相同的name

我不是很懂,就百度了一下发现并没有很理想的答案,之后别人叫我看一下源码

 function genRadioModel (
    el,
    value,
    modifiers
  ) {
    var number = modifiers && modifiers.number;
    var valueBinding = getBindingAttr(el, 'value') || 'null';
    valueBinding = number ? ("_n(" + valueBinding + ")") : valueBinding;
    addProp(el, 'checked', ("_q(" + value + "," + valueBinding + ")"));
    addHandler(el, 'change', genAssignmentCode(value, valueBinding), null, true);
  }

addProp(el, ‘checked’, ("_q(" + value + “,” + valueBinding + “)”));
addHandler(el, ‘change’, genAssignmentCode(value, valueBinding), null, true);
看到这两行代码其实是有实现给radio添加checked属性的.

大概的原理估计就是监视所有v-model相同的radio元素,当radio的value和data中的值相同就添加一个checked属性,当值发生了变化就重新添加,相同v-model的radio只有一个有checked,这样就实现了radio的互斥