其他分享
首页 > 其他分享> > vue 模拟单选多选变色

vue 模拟单选多选变色

作者：互联网

1 veu单选li变色

思路：1动态绑定样式：选中哪个给哪个加类名

2：给li都添加点击事件，点击事件传参数可以拿到数组对象的的全部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in datalist" :key="index" 
            @click="changeTgeIndex(index, item.name,item.id)"
            :class="{unsatisfied:unsatisfied,
                tagActivity: 
                ratingTageIndex == index}"
            >
                {{item.name}}
            </li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                ratingTageIndex: 0,
                datalist: [{
                        id: 1,
                        name: 'ddd'
                    },
                    {
                        id: 2,
                        name: 'dfdd'
                    },
                    {
                        id: 3,
                        name: 'dfds'
                    },
                    {
                        id: 4,
                        name: 'dfdsd'
                    },
                    {
                        id: 5,
                        name: 'dfdsf'
                    }
                ]
            },
            mounted() {
                console.log("aa")
            },
            methods:{
                changeTgeIndex(index, name,id){
                    console.log(index,name,id)
                    this.ratingTageIndex = index;

                }

            }
        })
    </script>
    <style>
        .unsatisfied{
                background-color: #f5f5f5;
                color: #aaa;
            }
            .tagActivity{
                background-color: #3190e8;
                color: #fff;
            }


    </style>
</body>

</html>

vue多选li变色：

思路动态绑定class 样式！点击时判断一个新数组里是否含这一项 要不含把这一项加进去数组

根据数组里是否含这一项判断！去绑定class:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .on {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li :class="{'on':indexList.indexOf(index)>-1}" v-for="(item,index) in heros" @click="change(index)">
                {{item}}</li>
        </ul>
    </div>
</body>
<script src="/lib//vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            heros: ['雷恩加尔', '安妮', '沃里克', '德莱厄斯'],
            indexList: []
        },
        methods: {
            change(index) {
                let arrIndex = this.indexList.indexOf(index);
                console.log("数组索引", arrIndex)
                if (arrIndex > -1) {
                    this.indexList.splice(arrIndex, 1)
                } else {
                    this.indexList.push(index)
                }
                console.log("输出数组", this.indexList)
            }
        }
    })
</script>

</html>
转载：https://zhuanlan.zhihu.com/p/139794424

标签：index,vue,多选,indexList,color,单选,数组,id,name
来源： https://www.cnblogs.com/ylblogs/p/15629910.html