踩坑vue v-for操作DOM后不更新

最新推荐文章于 2024-05-16 13:45:21 发布

置顶

goded_v

最新推荐文章于 2024-05-16 13:45:21 发布

阅读量3.1k

点赞数 1

分类专栏：笔记文章标签： vue diff 虚拟dom

本文链接：https://blog.csdn.net/weixin_43986782/article/details/89578507

版权

踩坑vue v-for操作DOM后不更新

前言

最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。

Image text

现象

看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后（比如改变class）；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现该样式还在。描述的不是很清楚，直接上图。

Image text

此时选中了第一条和第二条，点删除后如下图:

Image text

这时就会发现，为啥标记的颜色会还在，而且出现在了这两条上面。

先看下整体的代码（为了阅读方便，后面只是关键代码，完整代码见https://github.com/goded-v/goded-v.github.io/blob/master/js/dom.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    .click{
    
        background: red;
    }
</style>
<body>
<div id="app">
    <div v-for="(item,index) in list">
        <p :class="{click:item.class}" @click="add($event,item)">{
  {item.name}}</p>
    </div>
    <div @click="deleteItem()">删除</div>
</div>
</body>
<script>
    var app = new Vue({
    
        el:"#app",
        data:{
    
            list:[
                {
    name:"0",id:"0"},
                {
    name:"1",id:"1"},
                {
    name:"2"

最低0.47元/天解锁文章

goded_v

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
踩坑vue v-for操作DOM后不更新

踩坑vue v-for操作DOM后不更新前言最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。现象看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后（比如改变class）；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现...
复制链接

扫一扫