vue單頁面—支持單選或者多選

不用input標簽去實現vue的單選或者多選，可以有不同的樣式。

HTML：

<template>
    <div>
        <ul>
            <li v-for="(item, index) in arr" :key="index" :class="{'active':checkActive(item)}" @click="choose(item)">{{item}}</li>
        </ul>
        <p>選中的值有：{{this.currArr}}</p>
    </div>
</template>

　JS：

export default {
        data() {
            return {
                arr: ['1','2','3','4'],
                currArr: []
            }
        },
        methods: {
            checkActive (item) {
                // 當前數組中有該項，return返回true，則添加active類名，代表選中
                return this.currArr.indexOf(item) !== -1
            },
            choose(item){
                // this.currArr.length = 1;
               // 去掉上句注釋，則代表單選，不去掉注釋，則代表多選
                if(this.currArr.indexOf(item) == -1) { //在當前數組中找不到該選項
                    this.currArr.push(item)
                }else {
                    this.currArr.splice(this.currArr.indexOf(item), 1)
                }
            }
        }
    }

　CSS：

*{margin: 0;padding: 0;}
ul{overflow: hidden;}
ul li{
    list-style: none;
    width: 30px;height:25px;line-height: 25px;text-align: center;
    float: left;border:1px solid #ccc;margin:4px;
}
li.active{
    border:1px solid red;color:red;
}

　　這個實例是一個單頁面應用，沒有做成組件的形式，后面再整合一下。

　　方法中傳的參數，可以使item，也可以用index。