点击列表中的哪一项, 那么该项的文字变成红色 Vue小练习

最新推荐文章于 2022-01-13 20:53:09 发布

守护砂之国泰裤辣

最新推荐文章于 2022-01-13 20:53:09 发布

阅读量1.3k

点赞数 3

分类专栏： vue入坑文章标签： javascript es6

本文链接：https://blog.csdn.net/Richard1997/article/details/105050936

版权

vue入坑专栏收录该内容

4 篇文章 0 订阅

订阅专栏

看Vue学习视频中看到这个小练习，如title。实现如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Homework</title>
    <style>
        .showRed{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(f, index) in fruits" :class="{showRed:isRed[index]}" @click="changColor(index)">{{f}}</li>
        </ul>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fruits: ['Apple', 'Banana', 'Watermelon', 'Peach'],
                isRed: Array(4).fill(false) // 这里数组长度写死了我认为是不好的地方，后续如果有更好的方法一定改进
            },
            methods: {
               
                changColor(index) {
                    // 这里用到了map函数，感觉比较适合这里使用
                   this.isRed = this.isRed.map((v, i) => i == index);
                }
            }
        });
    </script>
</body>

</html>

未完待续...

更新，下面这种currentIndex方法更好，我之前的弄复杂了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Homework</title>
    <style>
        .showRed {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(f, index) in fruits" :class="{showRed: currentIndex === index}" @click="changColor(index)">{{f}}
            </li>
        </ul>
    </div>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fruits: ['Apple', 'Banana', 'Watermelon', 'Peach'],
                currentIndex: -1
            },
            methods: {
                changColor(index) {
                    this.currentIndex = index;
                }
            },
        })
    </script>
</body>

</html>

守护砂之国泰裤辣

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
点击列表中的哪一项, 那么该项的文字变成红色 Vue小练习

看Vue学习视频中看到这个小练习，如title。实现如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Homework</title> <style> .showRed{...
复制链接

扫一扫

专栏目录