1、單選

1.1、兩個選項的單選

樣式：點擊按鈕通過class控制選中樣式

<div class="fr"> <a :class="{checked:shikanInfo.isAccompany===1}" @click="shikanInfo.isAccompany=1">是</a> <a :class="{checked:shikanInfo.isAccompany===0}" @click="shikanInfo.isAccompany=0">否</a> </div>

1.2、兩個以上選項的單選

樣式：通過class來控制，點擊的時候，讓傳送的內容等於當前option.msg；

 <div v-for="option in rentOptions" class="rentSelect">{{option.msg1}}
    <a :class="{checkOne:option.msg == shikanInfo.currentStatus}" @click="singleSelect(option,‘shikanInfo‘,‘currentStatus‘)"></a>
 </div>

//列表單選功能
singleSelect(option, key1, key2){
    this[key1][key2] = option.msg;
},
 

2、多選

樣式：class的值與當前表單的值綁定；

<li class="feature" v-for="option in otherFeatureArr">
    {{option.msg}}
    <div class="checkboxlabel">
        <input type="checkbox" :id="option.id" v-model="option.result">
        <label :for="option.id" :class="{checkMore:option.result}"></label>
    </div>
</li>
 

3、全選與單選相互控制

樣式：class的值與當前表單的值綁定，將png圖覆蓋在input上；

<div class="allDay">工作日
    <div class="checkboxlabel">
        <input type="checkbox" v-model="workdayAllSelected" id="workdayAll">
        <label for="workdayAll" :class="{checkMore:workdayAllSelected}"></label>
    </div>
</div>
<div class="timeBox" v-show="workdayOptionsShow">
    <ul>
        <li v-for="option in timeOptions.workdayOptions">{{option.msg}}
            <div class="checkboxlabel">
                <input type="checkbox" v-model="option.result" :id="option.id">
                <label :for="option.id" :class="{checkMore:option.result}"></label>
            </div>
        </li>
    </ul>
</div>

利用computed的get與set來控制全選與單選，類似購物車功能。

//computed
workdayAllSelected: {
    get(){
        return this.dealChkbox(‘workdayOptions‘, ‘workdayOptionsShow‘);
    },
    set(val){
        this.timeOptions.workdayOptions.forEach(item => { item.result = val });
    }
},


//methods
dealChkbox(dataKey, key) {
    var t = this.timeOptions[dataKey].filter(item => { return item.result === false });
    this[key] = t && t.length !== 3;

    return t.length > 0 ? false : true;
}, 

vue表單之列表選擇