[JavaScript知识库] VUE -- v-bind实现点击字体换色功能

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VUE -- v-bind实现点击字体换色功能 -> 正文阅读

[JavaScript知识库]VUE -- v-bind实现点击字体换色功能

要求使得点击的字体变色

思想：

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>

结果：