VUE -- v-bind实现点击字体换色功能

最新推荐文章于 2023-04-24 21:22:51 发布

DDD何

最新推荐文章于 2023-04-24 21:22:51 发布

阅读量2k

点赞数 4

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/a15800585396/article/details/119920687

版权

要求使得点击的字体变色

思想：

1.v-for 除了可以绑定数组的值，还可以绑定索引；基于此我们可以联想到之前ES5中，用queryselectAll获取所有li ，然后用循环遍历，通过索引绑定点击变色的事件，当然这里面可能会有闭包的问题，循环用let i 更好

2.@click；v-on：click 可以指定一个事件行为标识符，这里直接用表达式表达了；将点击的索引赋值给acticeIndex 这样就可以绑定；

3.v-bind：绑定class active，其中boolean 用active是否等于index true、false来使得active 的css代码是否生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color:red
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" @click="activeIndex=index" :class="{'active':activeIndex==index}">{{index}} {{item}}</li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>

        const app = new Vue({
            el: "#app",
            data: {
                movies: ["星际穿越","盗梦空间","火影忍者","黑客帝国"],
                activeIndex: 0  
            },
        })
    </script>
        
</body>
</html>

结果：

DDD何

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE -- v-bind实现点击字体换色功能

要求使得点击的字体变色思想：1.v-for 除了可以绑定数组的值，还可以绑定索引；基于此我们可以联想到之前ES5中，用queryselectAll获取所有li ，然后用循环遍历，通过索引绑定点击变色的事件，当然这里面可能会有闭包的问题，循环用let i 更好2.@click；v-on：click 可以指定一个事件行为标识符，这里直接用表达式表达了；将点击的索引赋值给acticeIndex 这样就可以绑定；3.v-bind：绑定class active，其中boolean 用ac...
复制链接

扫一扫