vueJS 009 v-for 中的key注意事项

最新推荐文章于 2023-06-09 10:24:03 发布

helloWorldAndYou

最新推荐文章于 2023-06-09 10:24:03 发布

阅读量133

点赞数

分类专栏： vue.js 前端

本文链接：https://blog.csdn.net/helloWorldAndYou/article/details/104896184

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue.js

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">
        input[type="text"]{
            height: 37px;
            width: 100px;
        }
        input[type="button"]{
            height: 43px;
            width: 80px;
            vertical-align: bottom;
        }
        table,tr,th,td{
            border: #ddd solid 1px;
            border-collapse:collapse
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        学名：<input type="text" v-model="name">
        生存状态：<input type="text" v-model="survive">
        <input type="button" value="add" @click="add">
    </div>
    <table>
        <tr>
            <th></th>
            <th>序号</th>
            <th>学名</th>
            <th>生存状态</th>
        </tr>
<!--    选中一行，如果没有:key，添加数据后，所选中的行将会错乱    -->
        <tr v-for="(plant,i) in plants" :key="plant.id">
            <td><input type="checkbox"></td><td>{{plant.id}}</td><td>{{plant.name}}</td><td>{{plant.survive}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            id:3,
            name:"",
            survive:"",
            plants:[
                {id:1,name:"中华古果",survive:"已灭绝"}
                ,{id:2,name:"光叶蕨",survive:"已灭绝"}
                ,{id:3,name:"篦齿苏铁",survive:"已灭绝"}
            ]
        },
        methods:{
            add(){
                this.plants.unshift({id:++this.id,name:this.name,survive:this.survive});
            }
        }
    });
</script>
</body>
</html>

helloWorldAndYou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vueJS 009 v-for 中的key注意事项

<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
复制链接

扫一扫

专栏目录