Vue中的排他思想案例

最新推荐文章于 2022-12-03 22:00:00 发布

llt299022

最新推荐文章于 2022-12-03 22:00:00 发布

阅读量2.1k

点赞数 2

文章标签： vue

原文链接：https://www.bilibili.com/video/BV15741177Eh?from=search&seid=5388359339832598352

版权

这个博客展示了一个简单的HTML页面，其中使用Vue.js实现了列表项的点击高亮功能。当用户点击列表中的一个项时，其文字颜色会变为红色，通过`itemClick`方法更新`currentIndex`来跟踪当前选中的项。博客内容涵盖了Vue.js的基本用法，包括数据绑定、事件监听和动态类应用。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 先for循环遍历  movies          class active：true 默认值是0   监听点击事件itemClick(索引号) -->
            <li v-for="(item,index) in movies" :class="{active: index===currentIndex}" @click="itemClick(index)">{{item}}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海尔兄弟', '进击的巨人', '火影忍者'],
                currentIndex: 0
            },
            methods: {
                // 点击后把index传给 currentIndex
                itemClick: function(index) {
                    this.currentIndex = index
                }
            }
        });
    </script>
</body>

</html>

llt299022

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Vue中的排他思想案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫