vue动态添加 li 被选样式css:html:vue:

71 阅读 0 评论 47 点赞

我是靠谱客的博主洁净棉花糖，这篇文章主要介绍vue动态添加 li 被选样式css:html:vue:，现在分享给大家，希望可以做个参考。

css:

复制代码

1
2
3
4
<style type="text/css">
    ul li {cursor: pointer;}
    .blue {color: #2175bc;}
</style>

html:

复制代码

1
2
3
4
5
6
7
<div id="app">
    <ul>
        <li v-for="(todo, index) in todos" v-on:click="addClass(index,$event)" v-bind:class="{ blue:index==current}">
            {{ todo.text }}
        </li>
    </ul>
</div>

vue:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    new Vue({
        el: '#app',
        data: {
            current:0,
            todos: [
                { text: '选项一' },
                { text: '选项二' },
                { text: '选项三' }
            ]
        },
        methods:{
            addClass:function(index,event){
                this.current=index;
                 //获取点击对象
                var el = event.currentTarget;
                alert("当前对象的内容："+el.innerHTML);
            }
        }
    })
</script>