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

css:

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

html:

<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:

<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>

最后

以上就是洁净棉花糖为你收集整理的vue动态添加 li 被选样式css:html:vue:的全部内容，希望文章能够帮你解决vue动态添加 li 被选样式css:html:vue:所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。