四、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 @   搬砖工具人  阅读(240)  评论(0)  编辑  收藏  举报
相关博文：
·  三、动态绑定属性（Class）
·  五、动态绑定属性（style）
·  Vue-动态绑定属性
·  4.v-bind 及 class 与 style 绑定
·  v-for中动态绑定样式
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手