javascript - vuejs中怎么实现按钮组单选

Question

vuejs中怎么实现按钮组单选？可以通过指令或者其他说明vuejs自带的api实现么？

Answer 1

官方文档里的例子：

<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就可以实现啊

Answer 2

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

//////html部分///////

<p 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>
</p>

//////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'}
      ]
  }
});

最后渲染结果为

<p 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>
</p>

浏览器中显示