不用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; 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。