Vue学习——使用v-for渲染后，改变列表里的某个数据并可以二次渲染

最新推荐文章于 2023-09-09 15:12:59 发布
最新推荐文章于 2023-09-09 15:12:59 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouxian1998/article/details/117401199
版权

前言

vue的导入

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

or:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

问题

问题描述：通过v-for渲染表格，在第一次渲染成功后，修改了某个单元格内容，第二次渲染时该单元格内容未改变（同行其他单元格内容成功渲染）

问题分析：渲染成功后直接修改表格的内容，会直接替换掉修改位置的表达式，使得不能二次渲染

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div>
    <div id="app" style="text-align: center;align-items: center">
        <table style="width: 50%;margin: 0 auto"
               class="table table-condensed table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">用户名</th>
                <th scope="col"></th>

            </tr>
            </thead>
            <tbody id="pwd_list">
            <tr v-for="item in items">
                <th scope="row">{{ item.ID }}</th>
                <td><span>{{ item.name }}</span></td>
                <td>
                    <button class="btn btn-default" v-on:click="Onclick($event)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-default" v-on:click="review()" style="margin: 2px auto">重新渲染表格</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"}
            ],
        },
        methods: {
            Onclick: function (event) {
                var button_ob = event.currentTarget;
                var name_obj = $(button_ob).parent().prev();
                name_obj.text('测试')
            },
            review: function () {
                app.items = [
                    {"ID": 2, "name": "qwe1"},
                    {"ID": 2, "name": "qwe1"}
                ]
            }
        }
    });

</script>
</body>

</html>

如上述代码所示：点击修改按钮将当前行的用户名修改为测试，然后再点击重新渲染表格按钮，但是已修改位置数据没有改变仍为测试

解决方法

本人是vue的初学者所以接下来会将我遇到这个问题时尝试的几种方法展示出来：

第一种“蠢”办法

基于我是要对用户名进行修改的这个需求，想到可以在用户名这个单元格内增加一个隐藏<span id="change" style="display:none">hide</span>标签来展示修改文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div>
    <div id="app" style="text-align: center;align-items: center">
        <table style="width: 50%;margin: 0 auto"
               class="table table-condensed table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">用户名</th>
                <th scope="col"></th>

            </tr>
            </thead>
            <tbody id="pwd_list">
            <tr v-for="item in items">
                <th scope="row">{{ item.ID }}</th>
                <td>
                    <span id="default">{{ item.name }}</span>
                    <span id="change" style="display:none">hide</span>
                </td>
                <td>
                    <button class="btn btn-default" v-on:click="Onclick($event)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-default" v-on:click="review()" style="margin: 2px auto">重新渲染表格</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"}
            ],
        },
        methods: {
            Onclick: function (event) {
                var button_ob = event.currentTarget;
                var name_obj = $(button_ob).parent().prev();
                name_obj.find('span[id^="default"]').hide();
                name_obj.find('span[id^="change"]').show();
                name_obj.find('span[id^="change"]').text('测试')
            },
            review: function () {
                app.items = [
                    {"ID": 2, "name": "qwe1"},
                    {"ID": 2, "name": "qwe1"}
                ]
                $("[id=default]").each(function () {
                    $(this).show()
                });
                $("[id=change]").each(function () {
                    $(this).hide()
                });
            }
        }
    });

</script>
</body>

</html>

第二种方法

每次点击修改时，不直接修改单元格内容，而是对数据集对应内容进行修改

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div>
    <div id="app" style="text-align: center;align-items: center">
        <table style="width: 50%;margin: 0 auto"
               class="table table-condensed table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">用户名</th>
                <th scope="col"></th>

            </tr>
            </thead>
            <tbody id="pwd_list">
            <tr v-for="(item,index) in items">
                <th scope="row">{{ item.ID }}</th>
                <td>
                    <span id="default">{{ item.name }}</span>
                    <span id="change" style="display:none">hide</span>
                </td>
                <td>
                    <!-- <button class="btn btn-default" v-on:click="Onclick($event)">修改</button>-->
                    <button class="btn btn-default" v-on:click="Onclick(index)">修改</button>

                </td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-default" v-on:click="review()" style="margin: 2px auto">重新渲染表格</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"},
                {"ID": 1, "name": "qwe"}
            ],
        },
        methods: {
            Onclick: function (index) {
                 /*app.items[index].name = '测试';*/
                this.$set(this.items[index], 'name', 测试)
            },
            review: function () {
                app.items = [
                    {"ID": 2, "name": "qwe1"},
                    {"ID": 2, "name": "qwe1"}
                ]
                $("[id=default]").each(function () {
                    $(this).show()
                });
                $("[id=change]").each(function () {
                    $(this).hide()
                });
            }
        }
    });

</script>
</body>

</html>
程序员？农民工！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE v-for中修改data数据
ElectronStorm的专栏
05-16 198
后来查了一下，发现在v-for中不能修改data中的数据，似乎修改后，会触发v-for的再次修改。反反复复的折腾了半天，后来放弃了。还是直接修改数据吧。但这要求数据量不能太大，否则渲染压力一下就上来了。先这样吧，等以后有好方法再说。想着这还不简单，只要在data中定义一个变量，然后每次调用时++就行了。结果出来的结果，序号都是4000多，要不就是8千多，反正不是从1开始。
Vue中强制组件重新渲染的正确方法
qq_43159578的博客
09-14 2179
有时候，依赖vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？ 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更key的值，Vue 就会重新渲染组件。 这是一个非常简单的解决方案。 当然，你可能会对其他方式会更感兴趣： 简单粗暴的方式：重新加载整个页面 不妥的方式：使用v-if 较好的方法：使用Vue的内置forceUpda...
vue通过v-for渲染的列表，可以单独操作的其中的列表的两种方法
weixin_30642029的博客
07-14 964
如图，三个标题分别有多个子元素。通过点击三个标题分别控制显示和隐藏。上代码 第一种情况：点击 青1，其所有的标题下的列表全部隐藏，也就是只有一个标题的会显示子元素 <div class="items" v-for="(item,index) in list"><div class="item_top" @click="clickTitle(index)"> /...
vue中v-for中数据状态值变了，但是视图没改变
weixin_42551915的博客
06-02 4123
一.问题现象： 1.你在v-for中列表的每个item都有个按钮，你点击按钮，想把按钮的类名通过一个属性show,type为boolean来动态的选择 2.v-show通过每个item这个show的true还是false来显示 最后发现你在点击后，输出发现，true，false都有变，但是感觉似乎试图没有重新渲染。通过搜索，发现v-for对于数组添加和删除的操作，不会进行二次绚烂，但是这不是添加和删除 ，只是进行值状态的改变，即修改。似乎感觉以前也是这么写就没问题。 二.问题出现原因： 1.你肯定这个属性是
关于vue中v-for绑定数据重新渲染的问题
本郡主是喵
08-18 1011
set 是 Vue 提供的一个全局方法，用于向响应式对象中添加或更新属性，并触发视图更新。它接受三个参数：对象、要添加/更新的属性名或索引，以及新的值。(他虽然这样说,但是我直接修改数组和对象元素，是能够重新渲染的，但是v-for渲染数据不可以。我修改被v-for绑定的数据，发现居然不能重新渲染。
v-for循环出多个元素，如何单独选中目标元素
hmhmhm0319的博客
06-20 3500
我们经常使用vue中v-for进行元素的循环渲染，渲染之后需要添加单独的功能，这个时候就会遇到一些问题。 上述代码中，我循环渲染了多个div，并添加了鼠标移入和移出事件。但是，在触发事件（鼠标移入）后，会导致所有的div都产生变化（所有div都触发函数并变色），这与意图不符。于是，修改如下： 原理：设置一个动态的类（v-bind），利用三元表达式判断传入的index是否与当前元素的index相等，如果相等，则改变当前...
深入理解Vue 的条件渲染和列表渲染
08-29
在上面的代码中，我们可以使用 v-for 指令来遍历 items 数组，并将每个元素的 name 属性渲染到 li 元素中。 key 属性 在列表渲染中，我们可以使用 key 属性来指定每个元素的唯一标识符。例如： ```html <li v-...
vue中v-show和v-if的异同及v-show用法
12-12
2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 3.相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS...
nebula(星云)——一款现代化的知识社区前台项目，使用 Vue + NuxtJS + Element-UI 实现.zip
最新发布
04-03
`说明.txt`文件很可能是对项目如何运行、安装依赖、启动服务等的简要说明，对于理解项目和进行二次开发非常有帮助。 综上所述，nebula项目利用Vue.js的灵活性和组件化特性，借助Nuxt.js的服务器端渲染能力，以及...
wiki:一个简洁的个人 wiki，使用 vue.js 和 markdown-js
07-05
开发者可以获取到源代码，进行二次开发或定制以满足特定需求。 综上所述，这个个人维基系统结合了Vue.js的动态界面与Markdown的简洁文本格式，通过CSS提供了良好的视觉效果，为用户提供了高效、个性化的知识管理和...
material-editor:基于Three.js，WebGL和Vue.js的材质和着色器编辑器
05-18
《基于Three.js、WebGL和Vue.js的材质与着色器编辑器——material-editor深度解析》 在现代网页开发中，交互式3D图形已经变得越来越常见，这得益于WebGL的强大支持。Three.js作为JavaScript库，是WebGL的绝佳伴侣，...
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
weixin_45453560的博客
07-29 6717
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
vue中使用v-for渲染的列表当某项数据变动时视图列表没有更新问题解决
格の调
02-09 2158
例如视图中的列表 <tr v-for="vo in indexData.list"> <td>{{vo.code}}</td> <td>{{vo.username}}</td> <td>{{vo.cTime}}</td> </tr> 渲染的是以下数据 // 视图列表数据 indexData:{ total: 20, list: [ { "id": 101,
Tracy 小笔记 Vue - 数据展示，基本指令，绑定属性 v-bind，v-for，条件渲染，强制渲染
weixin_48702807的博客
04-02 214
数据展示 插值操作 data 里的数据都是怎么显示在页面上的？ Mustache 语法 (胡须，也就是双大括号) : {{变量 | 简单表达式}} v-once 指令的使用： {{message}} 不加 v-once 的时候 message 之后变了，页面显示会跟着变。 如果需求是只显示最初的值，以后值不变，就要加这个指令。 v-html : 当服务器给我们返回的数据带标签的时候， 如： url: ‘百度一下’, {{ur}}: 页面会把这一串标签当做字符转打印出来 {{ur}} 页面会将这个a 标签正常
vue利用key重新渲染组件
sdu_DYL的博客
04-10 2109
vue利用key重新渲染组件
11~vue中列表渲染v-for
俗人世界
09-09 120
v-for遍历对象, 语法结构为: v-for="item in items", 其中特别注意, 必须加key,`key` 唯一标识, 快速找到`DOM`节点, 减少渲染次数, 提升渲染性能。
vue v-for循环修改属性后页面不重新渲染
Lv骚年
04-28 7233
问题：修改for循环中一组数据的一个属性值后，页面没有重新渲染，尝试使用$set修改触发渲染，但是不好使。 解决办法：强制刷新 this.$forceUpdate() ...
使用v-for指令渲染界面，数组数据更新后不渲染新数据问题
weixin_43512524的博客
08-27 2940
初学vue，只是想要假数据来模拟一下 目的：实现点击这个按钮就会在页面加载新数据 实现：直接在数组里,改变数组（push函数）来达到重新渲染页面的目的 1.页面v-for渲染代码 <div class="cmt-item" v-for="item in comList"：key> <div class="cmt-title"> {{ item.time }} </div> <div class="cmt-
vue.js基于v-for实现批量渲染 json数组对象列表数据示例
09-04
Vue.js是一种流行的JavaScript框架，可以帮助我们构建动态的Web应用程序。使用Vue.js的v-for指令，我们可以轻松地在HTML模板中渲染JSON数组对象列表数据。 假设我们有一个JSON数组对象，包含多个学生的信息，每个学生有姓名和年龄两个属性。我们想通过Vue.js的v-for指令，将这些学生的信息批量渲染到页面上。 首先，在Vue.js中，需要定义一个data对象来存储我们的数据。我们可以在data对象中定义一个students属性，其值为我们的JSON数组对象。 接下来，在HTML模板中，我们可以使用v-for指令来遍历这个JSON数组对象。具体来说，我们可以在一个div容器上使用v-for指令，并使用"student in students"语法来进行遍历。这样，vue.js会自动将每个学生的信息渲染到页面上。 最后，我们可以在v-for指令的内部使用{{ }}语法来显示学生的具体信息。其中，使用{{ student.name }}和{{ student.age }}来分别显示学生的姓名和年龄。 整个过程可以通过下面的代码示例来实现： ```html <div id="app"> <div v-for="student in students"> <p>姓名：{{ student.name }}</p> <p>年龄：{{ student.age }}</p> </div> </div> <script> new Vue({ el: '#app', data: { students: [ { name: '小明', age: 18 }, { name: '小红', age: 19 }, { name: '小亮', age: 20 } ] } }) </script> ``` 以上就是一个基于v-for指令实现批量渲染JSON数组对象列表数据的示例。通过这个示例，我们可以看到Vue.js提供了非常方便的数据驱动视图的方式，使得我们可以轻松地渲染和更新大量的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值