大飞_dafei

导航

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>

 

 

posted on 2020-09-27 20:10  大飞_dafei  阅读(1532)  评论(0编辑  收藏  举报