做网站 多少钱合肥网站优化技术

使用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

12

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