vue v-for出来的列表，点击某个li使得当前被点击的li字体变红

最新推荐文章于 2023-12-29 08:00:00 发布

审美高地蜡笔小新

最新推荐文章于 2023-12-29 08:00:00 发布

阅读量956

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/sj_wl/article/details/102749397

版权

Vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

vue学习——小案例01

需求描述： 点击列表中某一项，使得被点击项突出显示

思路： @click中choosedMovie记录下被点击项的索引，:class="{类名:boolean值}"中boolean值为当前项的index，与记录的索引值choosedMovie，相互比较的结果。即：index==choosedMovie
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue点击li动态绑定class</title>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in movies" @click="chooseMovie(index)" :class="{red:index==choosedMovie}">{{item}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            movies:['教父','美国往事','闻香识女人','海上钢琴师'],
            choosedMovie:-1
        },
        methods:{
            chooseMovie(index){
                this.choosedMovie=index;
            }
        }
    })
</script>
</body>
</html>

效果图