html 选项按钮组,vuejs中怎么实现按钮组单选

使用vue的component组件实现radio单选按钮

//html部分///

//js部分///

// 定义组件模板

var temp = '{{ txt }}';

// 注册一个全局的组件

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'}

]

}

});

最后渲染结果为

跑步

足球

跳高

浏览器中显示