利用Vue.js来制作一个小的Demo1

野性酷女 2022-06-12 07:19 147阅读 0赞

这个Demo主要是使用一些基础的Vue.js来通过增加用户的名字的同时，当提交的时候，表格上的人员名单也会更加，如果想要删除某个人员，那么可以通过删除的按钮来进行操作，当点击了相应的人员的按钮之后，该人员的资料就会删除。

Vue.js
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    
    
       
        Create New Person Name: Age: Name Age Delete { {person.name}} { {person.age}} Delete 
    
    <script>
    new Vue({
    	el:'#app',
    	data:{
    		newPeople:
    		{
    			name:'',
    			age:0
    		},
    		people:[
    		{
    			name:'Jack',
    			age:30
    		},
    		{
    			name:'Bill',
    			age:26
    		},
    		{
    			name:'Tracy',
    			age:29
    		},
    		{
    			name:'Lily',
    			age:22
    		}
    		]
    	},
    	methods:{
    	addPeople:function(){
    		this.people.push(this.newPeople);
    		this.newPeople={name:'',age:0}
    	},
    	deletePeople:function(index){
    		this.people.splice(index,1);//从index中开始删除，删除一个元素
    		
    	}
    	}
    	})
    </script>

这里主要是使用了双向数据绑定v-model，然后当事件发生时，对其做相应的处理，这里用到一个v-for，这个是循环渲染指令，其中有一个index的属性，可以用来标记删除人员的下标。

![Center][]

[Center]: /images/20220612/b24dc93ecbd5431c9c180408322746c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关利用免费Excel控件来制作Excel报表

我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能，寻找实现这个功能的控件的任务分配给了我，通过百度搜索我找到了一个免费的控件，它是由E-iceblue公司推出

忘是亡心i/ 2024年02月17日 15:27/ 0 赞/ 78 阅读

相关 3dsmax制作一个小人

文章目录步骤起阶五官手臂短袖添加头发、头饰 BodyPaint软件贴图

落日映苍穹つ/ 2023年10月14日 00:24/ 0 赞/ 43 阅读

相关如何利用python制作一个解压缩软件

如何利用python制作一个解压缩软件 python实现解压缩的重要模块就是——zipfile，其次是os 安装zipfile模块首先得安装zipfile模块，

曾经终败给现在/ 2023年07月25日 09:08/ 0 赞/ 39 阅读

相关 python制作一个桌面小工具

python实现一个桌面小工具，制作一个桌面的便签提醒工具参考代码：[https://github.com/cosven/memo][https_github.com_

今天药忘吃喽~/ 2022年12月18日 12:53/ 0 赞/ 166 阅读

相关一个vue小demo代码介绍

上篇文章说道，前段时间忙里偷闲，试了一下vue，搞了个小demo作为练习。原本以为很简单，但实际上耗费时间超出我的想象。如果有客观原因，是vue有自己的私货，另外一个就是缺乏完

太过爱你忘了你带给我的痛/ 2022年12月15日 06:13/ 0 赞/ 142 阅读

相关自己写一个hibernate的小demo

1.准备pom如下： <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www

朱雀/ 2022年07月18日 05:20/ 0 赞/ 271 阅读

相关 ZK ACL访问的一个小demo

ZooKeeper zk=new ZooKeeper("192.168.1.188,192.168.1.189,192.168.1.190",50000,w);

た入场券/ 2022年06月18日 11:19/ 0 赞/ 202 阅读

相关利用Vue.js来制作一个小的Demo1

这个Demo主要是使用一些基础的Vue.js来通过增加用户的名字的同时，当提交的时候，表格上的人员名单也会更加，如果想要删除某个人员，那么可以通过删除的按钮来进行操

野性酷女/ 2022年06月12日 07:19/ 0 赞/ 148 阅读

相关 10分钟构建一个dubbo的小demo

很多时候，相对于先学东西,先看结果会让人更容易接受。因为先学是广撒网，被动式的。而先看结果，就会主动去学习，因为大家都想知道，为啥要这么这么干。由于本文

我就是我/ 2022年05月16日 00:30/ 0 赞/ 196 阅读

相关利用JavaScript制作一个简易计算器

在学习javascript过程中，利用了标签和标签，制作了一个简单的计算器。 function jia()\{ var n1 =doc

拼搏现实的明天。/ 2022年05月13日 22:35/ 0 赞/ 302 阅读