1.8 数组显示案例

最新推荐文章于 2022-01-02 11:18:43 发布

飞翔荷兰号

最新推荐文章于 2022-01-02 11:18:43 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/weixin_43374578/article/details/108693938

版权

一、数组显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo练习</title>

    <style>
        .firstColor{
            color:red;
        }
    </style>
</head>
<body>

<!--需求： 页面展示一个数组：  第一个元素默认为红色字体；
                           点击哪个元素，就会将红色切换到该元素-->
<div id = "first">

    <ul>
        <li v-for="(item,index) in movies"
            v-bind:class={firstColor:index==currentIndex}
            v-on:click="currentIndex=index">
            {{item}}
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let app = new Vue({
        el: "#first",
        data:{
            movies:['钢铁侠','雷神','蚁人','黑豹'],
            currentIndex: 0,
        },
    })

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

二、购物车案例

飞翔荷兰号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.8 数组显示案例

一、数组显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo练习</title> <style> .firstColor{ color:red; } </style></head><body>
复制链接

扫一扫