Vue将List中对象的元素赋值到table对应位置中

最新推荐文章于 2022-08-23 11:58:56 发布

保护眼睛

最新推荐文章于 2022-08-23 11:58:56 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaEE 前端文章标签： vue js java

本文链接：https://blog.youkuaiyun.com/qq_45859087/article/details/119680665

JavaEE 同时被 2 个专栏收录

14 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

该博客展示了如何在Vue中将List对象的数据正确地映射并显示在HTML表格的对应位置，通过实例代码解释了整个过程，并给出了运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue学习笔记

- - 代码
  - 结果

代码

<body>
<div id="app" style="text-align: center;background-color: yellow;text-indent: 20px">
    <v-simple-table v-show="true">
        <template v-slot:default >
            <thead>
            <tr style="background-color: dodgerblue;text-align: center">
                <th class="text-left">序号</th>
                <th class="text-left">用户</th>
                <th class="text-left">状态</th>

            </tr>
            </thead>
            <tbody>
            <tr v-for="user in userlist" style="background-color: dodgerblue;text-align: center">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.isadmin}}</td>

            </tr>
            </tbody>
        </template>
    </v-simple-table>
    <v-btn  v-on:click="updata">点击改变</v-btn>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            userlist:[
                {"id":1,"username":"hello","isadmin":1},
                {"id":2,"username":"ypc","isadmin":1},
                {"id":3,"username":"test","isadmin":0},
            ]
        }
        ,
        methods:{
            updata(){
                app.userlist[0].username = "changetest";
            }
        }
    });
</script>

结果

在这里插入图片描述