四、v-bind练习(实现li标签点击后变色)

1. 使用v-for 遍历输出 内容

2. 设置点击事件,单机li标签时,将li的索引值存放起来

3. 通过v-bind的对象调用方式进行 li 的样式更改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
        <style >
            .liClinkClass {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--开始时第一条红色  点击谁谁变成红色-->
            <!--展示列表-->
            <ul>
                <li v-for="( m , index ) in movies"
                    v-on:click="li_click(index, m)"
                    v-bind:class="{ 'liClinkClass' : isoKIndex == index }">{{ index + 1 }} - {{ m }} </li>
            </ul>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    movies:[ "电影一" , "电影二" , "电影三" , "电影四" , "电影五" ],
                    isoKIndex:0,
                },
                methods:{
                    li_click : function(data,item){
                        this.isoKIndex = data;
                        console.log("点击了:"+item);
                    }
                }
            });
        </script>
    </body>
</html>

 

posted @ 2022-03-28 16:53  搬砖工具人  阅读(232)  评论(0编辑  收藏  举报