vue中如何实现在页面手动增删数据

最新推荐文章于 2023-10-24 21:00:00 发布

晓明的日常操作

最新推荐文章于 2023-10-24 21:00:00 发布

阅读量133

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/wangming2531/article/details/108865116

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js实现一个简单的文本输入框，用户可以发布消息并实时更新列表。通过`v-model`双向数据绑定和`v-on:click`事件监听，展示了如何使用`unshift`和`splice`方法来实现实时消息发布和删除功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg">
            <button v-on:click="send()">发布</button>
            <ul>
                <li v-for="(item,index) in list">{{item}} <span v-on:click="del(index)">删除{{index}}</span></li>
            </ul>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'',
                    list:[
                        '昨天天气',
                        '评论',
                        '天气1',
                        '天气2',
                        '天气3',
                        '天气4',
                        '天气5',
                        '天气6',
                        '天气7',
                        '天气8'
                    ]
                },
                methods:{
                    send(){
                        // unshift在数组之前追加元素  只要数据有变化，页面就会重新渲染
                        this.list.unshift(this.msg)
                    },
                    del(a){
                        // splice(n,m) n代表的是操作的位置  m代表的是删除的个数 
                        this.list.splice(a,1)
                    }
                }
            })
        </script>
    </body>
</html>