Vue 点击元素变色


Vue  点击元素变色

<style>
    .activeClass{
        outline: 2px solid #c0c0c0;
        background-color: #c0c0c0;
    }
</style>
<div id="app">
    <ul>
        <li v-for="(item,index) in classInfo" :class="{activeClass: isActive===index}" @click="isActive=index">
            {{item.value}}
        </li>
    </ul>
</div>

<script src="vue.js"></script>
<script type="module">
    const app = new Vue({
        el: '#app',
        data() {
            return {
                classInfo: [
                    {key:"1",value:"daFei"},
                    {key:"2",value:"foo"},
                    {key:"3",value:"bar"},
                ],
                isActive: "",
            }
        }
    });
</script>

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM