vue.js可以使用v-model指令在表单控件元素上创建双向数据绑定,在人际交互方面具有很大的优势。
一、单选框
在传统的HTML中实现单选框的代码如下:
<div>
<p>性别:</p>
<input type="radio" name="first" value="man">
<label for="man">男</label>
<input type="radio" name="first" value="woman"/>
<label for="woman">女</label>
</div>
结果:
注:这里name属性值必须相同,以确保同一时间只有一个能被选中。
而用vue.js实现单选框会更方便一点。此时我们不再需要name属性只需要使用v-model指令给每个选项绑定同一个变量就可以确保同一时间只有一个被选中,同时value属性还是需要的,表示选中时的值。实现方法如下:
<div id="app">
<p>性别:</p>
<input type="radio" v-model="first" value="man">
<l