• 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;
         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。

  • 相关阅读:
    PHP 批量生成静态文件目录代码
    PHP 导出Excel 文档
    Samba Server 配置
    PHP curl超时问题
    php ci 2.0框架 ORM
    YII 的基本CURL操作
    PHP 操作socket 实现简易聊天室
    PHP simplexml_load_string 过滤<![CDATA[XXXX]]>
    PHP 获取当天 凌晨 时间戳常用代码
    2019年值得你使用的20大开发工具
  • 原文地址:https://www.cnblogs.com/ddkei/p/9796125.html
Copyright © 2020-2023  润新知