使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式
首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄。。。。还有很多,为了数据的简单明了,只举例部分数据即可
在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄。而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在调用的时候,就不需要进行判断啊之类的了;这里我们使用userName来存放用户名,使用userAge来存放用户年龄;要绑定在一起,我们不妨再设定一个变量(设置为 数组):userList,用来存放用户对象,包括用户名和用户年龄;现在,有三个变量了,一个是userName,一个是userAge,再一个是userList,为了方便我们在设定一个curIndex,用来存储当前的用户的索引;好了,data部分告一段落;
现在来看methods 部分:这里是操作方法,先想一下我们具体会用到哪些方法呢:一个是用户添加,这个在添加的时候会用到,一个是用户重置(当然也可以使用form 表单中的type='reset' 来实现,这里不打算使用表单自带的重置方法),还有一个是用户名删除(这里需要说明的是:删除分为删除全部数据和删除一条数据),当删除全部数据时,只需要将userList=[],即使用userList等于一个空数组即可,如果是删除一条数据,我们需要获取此条数据的索引,当获取索引后,在js中有一个函数splice(),可以用来删除数据,格式arr.splice(n,1),这里n表示要删除的数组中的项目的索引,1表示删除1个项目;大体的思路就是以上;
写代码的思路:首先把样子写出来,要什么样式,写出来之后,在进行添加操作
1
2
3
4
5
6
7
8
9
10
11
Document12
13 window.οnlοad= function() {14 varc= newVue({15 el:"#box",16 data: {17 userList: [],//用来存放用户对象
18 userName:'',//用户名
19 userAge:'',//用户年龄
20 curIndex:-10,//选中的当前项目索引,随便先设一个值-10
21 },22 methods: {23 //用户添加,添加的方法是,直接写成一个对象压入栈中
24 addUser:function() {25 this.userList.push({26 name:this.userName,27 age:this.userAge28 });29 //添加完成后,清空数据
30 this.userAge= '';31 this.userName= '';32 },33 //删除用户
34 delRow:function(n) {35 //传值为-1时,表示删除全部
36 if(n== -1) {37 this.userList=[];38 }else{39 //传值不为-1时,表示删除传入的项目
40 this.userList.splice(n,1);41 }42 },43 //重置函数:把用户名和年龄清空
44 resetRow:function() {45 this.userAge= '';46 this.userName= '';47 }48 }49 });50 }51
52
53
54
55
56
57
58
59
60 用户名:
61
62
63