VUE学习笔记-v-for和v-bind作业题

最新推荐文章于 2022-11-15 21:42:06 发布

IT悍将阿瑞

最新推荐文章于 2022-11-15 21:42:06 发布

阅读量334

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/jiarui_mama/article/details/114906343

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

作业题目

列表展示任意文字数据，点击某一行则对应的字体变为红色，使用v-for和v-bind命令实现；
效果图如下，点击bbb时bbb字体变为红色；
在这里插入图片描述
点击aaa时，aaa字体变为红色；

实现代码

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

<div id="app">
    <ul>
        <li v-for="(m,index) in movies" v-on:click="clickStatus(index)" :class="{active:i==index}">{{m}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            i:0,
            movies:['aaa','bbb','ccc'],
            index:0
        },
        methods:{
            clickStatus:function(index){
                this.i=index;
            }
        }
    });

</script>
</body>
</html>

-END-

如果你喜欢我的分享，欢迎关注微信公众号 java学长分享技术干货！

悄悄告诉你免费赠送重磅互联网架构师教程，提升职场技术水平！

IT悍将阿瑞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
VUE学习笔记-v-for和v-bind作业题

作业题目列表展示任意文字数据，点击某一行则对应的字体变为红色，使用v-for和v-bind命令实现；效果图如下，点击bbb时bbb字体变为红色；点击aaa时，aaa字体变为红色；实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a
复制链接

扫一扫