Vue-007 小例子，列表中点击哪个，哪个就变红

最新推荐文章于 2023-02-15 14:59:22 发布

youngcave2

最新推荐文章于 2023-02-15 14:59:22 发布

阅读量419

点赞数 3

分类专栏： vue入门 vue小实例

本文链接：https://blog.csdn.net/yougcave/article/details/113888068

版权

vue入门同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

vue小实例

5 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color:red;
        }
    </style>
</head>
<body>

<div id="app">
    <h2 v-pre>vue小例子，遍历数组时，点击哪个哪个就变红</h2>
    <ul>
        <li v-for="item,index in names" @click="btn(index)" :class="{active:index==currentIndex}">{{item}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            names:['jack','james','jackson','java','javascript'],
            currentIndex:-1
        },
        methods:{
            //把点击的index传到这里来，再传给durrentIndex,然后再回到HTML中判断
            btn(index){
                this.currentIndex=index;
            }
        }
    })
</script>

</body>
</html>

重点

1.@click="btn(index)"

在HTML中给v-on加个参数index，可以把v-for的index传到vue的methods里，这样methods就知道哪个index被点击了

2.this.currentIndex=index

在methods里把HTML中传进来的index再传给currentIndex，再回去HTML判断

运行效果

这效果应该很常用，写了几遍，算是背下来了，但还是不是很理解，继续再敲几遍，背熟了拉倒，我不懂，但是我会写

youngcave2

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-007 小例子，列表中点击哪个，哪个就变红

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color:red; } </style></head><body><div
复制链接

扫一扫