官方文档里的例子: <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> type radio v-model绑定一个Vue的data就可以实现啊
使用vue的component组件实现radio单选按钮 //////html部分/////// <div id="app"> <form > <!--组件的属性可以使用Vue的绑定的语法,动态绑定数据给组件,绑定的属性是下面props定义的--> <radio-tag v-for="item in items" :rid="item.demoId" :txt="item.demoText" :val="item.demoVal" :nme="item.nm"></radio-tag> </form> </div> //////js部分/////// // 定义组件模板 var temp = '<label v-bind:for="rid">{{ txt }}<input :id="rid" type="radio" v-bind:value="val" :name="nme"></label>'; // 注册一个全局的组件 Vue.component('radio-tag', { template: temp, props: ['rid', 'txt', 'val','nme'], // 设置组件的属性有哪些,要和定义标签的属性一致。 data () { // 注意属性名都得是小写,不然会不认的。 } }); // 初始化一个Vue实例 var app = new Vue({ el: '#app', data: { items:[ {demoId:'run',demoText:'跑步',demoVal:'3',nm:'love'}, {demoId:'ft',demoText:'足球',demoVal:'4',nm:'love'}, {demoId:'jump',demoText:'跳高',demoVal:'5',nm:'love'} ] } }); 最后渲染结果为 <div id="app"> <form> <label for="run">跑步<input id="run" type="radio" name="love" value="3"></label> <label for="ft">足球<input id="ft" type="radio" name="love" value="4"></label> <label for="jump">跳高<input id="jump" type="radio" name="love" value="5"></label> </form> </div> 浏览器中显示
官方文档里的例子:
type radio v-model绑定一个Vue的data就可以实现啊