vue.js实现单选框、复选框和下拉框示例
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。
一、单选框
在传统的HTML中实现单选框的方法如下:
男 女
注:这里name属性值必须相同,以确保同一时间只有一个能被选中。同时用于识别发送至服务器的数据;value值也很重要,当按钮被选中时,该值将发送给服务器;
用vue.js实现单选框比较方便,举例如下。我们不再需要name属性,只需要使用v-model指令给每个选项绑定同一个变量就可以确保同一时间只有一个被选中,同时value属性还是需要的,表示选中时的值。
已选:{{gender}}
二、复选框
在传统的HTML中实现复选框代码如下:
jack bob alice