zoukankan html css js c++ java

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

不求大富大贵，但求一生平凡

查看全文

相关阅读:
leetcode108 Convert Sorted Array to Binary Search Tree
leetcode98 Validate Binary Search Tree
leetcode103 Binary Tree Zigzag Level Order Traversal
leetcode116 Populating Next Right Pointers in Each Node
Python全栈之路Day15
Python全栈之路Day11
集群监控
 Python全栈之路Day10
自动部署反向代理、web、nfs
5.Scss的插值

原文地址：https://www.cnblogs.com/ylblogs/p/15629910.html