vue点击添加数据

通过v-model来实现数据的添加，以后会有更好的办法。

首先，写三个input 文本域，然后通过v-model 双向绑定data 里面的prop 对象里面对应的字段，里面的字段都给空字符串，因为一开始没输入的时候是没有值的，我这里是    v-model="prop.name"。

再然后创建一个table，里面的td 的值在data 里面的list 里拿取，我这里是{{item.name}}，table 记得v-for 循环data 里面的list 数组，不然拿不到值，看我的代码就知道怎么做了，，这里是动态拿取，方便后面操作。

最后，写一个按钮button，里面写一个方法，方法里面用let 声明一个新的对象，然后用名称来接收 prop 里面的值，我这里是用了newObj 来接收，为什么呢。我们首先要拿到用户输入的值，才可以对此进行操作。

赋值之后呢，就添加进list 数组里面，为什么呢，因为td 表格里面的值是动态拿取的，所以list 的值改变了，页面也会跟着改变。语法是 this.list.push(newObj);。意思就是，把newObj 这个对象添加进list 数组里面。

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="./vue2.6.10.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .box {
            padding-top: 20px;
        }

        table {
            width: 603px;
            height: 35px;
        }
        tr{}

        td {
            width: 200px;
            text-align: center;
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <div id="app">
        姓名：<input type="text" v-model="prop.name">
        性别：<input type="text" v-model="prop.sex">
        年龄：<input type="text" v-model="prop.age">
        <button @click="add">添加数据</button>
        <div class="box">
            <table v-for="(item,index) in list" :key="index">
                <tr>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Hello Vue!',
                    prop: {
                        name: '',
                        sex: '',
                        age: '',
                    },
                    list: [{
                        name: '小王',
                        sex: '男',
                        age: '18'
                    }],
                }
            },
            methods: {
                add() {
                    let newObj = {
                        name: this.prop.name,
                        sex: this.prop.sex,
                        age: this.prop.age
                    }
                    this.list.push(newObj);
                }
            }
        })
    </script>
</body>

</html>

 

效果图

 

 结束

posted @ 2019-07-01 10:04  阳光‘  阅读(7216)  评论(0)  编辑  收藏  举报