vuejs中怎么實(shí)現(xiàn)按鈕組單選?可以通過指令或者其他說明vuejs自帶的api實(shí)現(xiàn)么?
人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!
官方文檔里的例子:
<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就可以實(shí)現(xiàn)啊
//////html部分///////
<p id="app">
<form >
<!--組件的屬性可以使用Vue的綁定的語法,動態(tài)綁定數(shù)據(jù)給組件,綁定的屬性是下面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'], // 設(shè)置組件的屬性有哪些,要和定義標(biāo)簽的屬性一致。
data () { // 注意屬性名都得是小寫,不然會不認(rèn)的。
}
});
// 初始化一個Vue實(shí)例
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'}
]
}
});
最后渲染結(jié)果為
<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>
瀏覽器中顯示