vue实现一个简易的添加信息

最新推荐文章于 2023-06-20 16:44:53 发布

想快快长大

最新推荐文章于 2023-06-20 16:44:53 发布

阅读量955

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_41812254/article/details/98179630

版权

vue.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

vue.js的确好用啊如果用js做的话代码就多了起来了操作dom也影响性能直接贴代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>demo13</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">

            <div>
                <label>id
                    <input type="text" v-model="id"/>
                </label>

                <label>name:
                        <input type="text" v-model="name"/>
                    </label>
                   
                    <button @click="add">添加</button>
            </div>

            <p v-for="(item, index) in list" :key="index">
                <input type="checkbox" />
                id:{{item.id}}名字:{{item.name}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    id: '',
                    name: '',
                    list: [
                        { id: 1, name: '李四'},
                        { id: 2, name: '问问'},
                        { id: 3, name: '身上'},
                        { id: 4, name: '暗色'},
                        { id: 5, name: '方式'},
                    ]
                },
                methods:{
                    add() {
                        // 选择到list添加一条 id来自我增加的id name来自我增加的name
                        // 上面的id和name被我赋值空 接受到我input框的值 因为vue是双向绑定
                        this.list.push({id: this.id, name: this.name})
                    }
                }
            })
        </script>
    </body>
</html>

想快快长大

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue实现一个简易的添加信息

vue.js的确好用啊如果用js做的话代码就多了起来了操作dom也影响性能直接贴代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>demo13</title> <script src="./lib/vue...
复制链接

扫一扫