vue 数据监听

如图：

两列表用来两个list数组装，当我点击添加时下面的那一条数据添加到上面的list数组中，同时这一条的背景色改变，两个列表都是用v-for循环出来的。
想实现添加一条数据上去背景色就改变。

阅读 3.2k

//先帮数组加个active this.list.forEach(l=>{ l.check=false }) //在循环里面控制样式 <div v-for="(item,index) in list" :class="{active:item.active}"></div> .active{ background-color:green; } //新增元素 //如果有别的active：true,先置为false this.list.forEach(l=>{ if(l.active) l.active=false }) this.list.push({ ... active:true })

是最后一条数据添加背景色吗？
1.最简单的方法用css的:last-child选择器

 li:last-child{
    background: green;
    }

2.v-for循环判断添加active:class="index+1==items.length?'active':''"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>        
        <style type="text/css">
            ul{
                list-style: none;
            }
            li.active{
                background: green;
            }
            li:last-child{
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li v-for="(item,index) in items" :key="index" :class="index+1==items.length?'active':''">{{item}}</li>
            </ul>
            <button @click="add">添加</button>
        </div>
        
        <script src="vue.js"></script>
        <script>
            var vm = new  Vue({
                el:"#box",
                data:{
                    items:["aaa","bbb","ccc"]
                },
                methods:{
                    add:function(){
                        this.items.push("ddd");
                    }
                }
            })
        </script>
    </body>
</html>

3.调用函数返回class

<li v-for="(item,index) in items" :key="index" :class="addactive(index)">{{item}}</li>
methods:{
                    add:function(){
                        this.items.push("ddd");
                    },
                    addactive:function(index){
                        if(index==this.items.length){
                            return 'active';
                        }
                    }
                }

当然还有其他方法，就不多说了

vue 数据监听

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

cursor使用一段时间之后保存编辑的文件会卡住?