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。

 

转载于:https://www.cnblogs.com/ddkei/p/9796125.html