vue实现留言板的功能_Vue.js实现留言板todolist功能

Vue.js实现留言板todolist功能

发布于 2020-6-24|

复制链接

摘记: 通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.第一步、使用bootstrap做好布局

```xhtml

..

通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.第一步、使用bootstrap做好布局

```xhtml

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

1

张三

20

删除

2

李四

22

删除

删除全部

暂无数据....

```

第二步、增加模态框，模态框默认为隐藏的

```xhtml

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

1

张三

20

删除

2

李四

22

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```

第三步、定义userList用来保存用户，userName保存用户名, age保存用户变量，  然后把userName和age 通过 v-model指令绑定到对应的输入框，实现输入框与变量中的数据双向驱动，在表格的行中输出userList

```xhtml

window.onload = function () {

var c = new Vue({

el: '#box',

data: {

userList: [],

userName : '',

age : ''

}

});

}

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

{{$index+1}}

{{value.name}}

{{value.age}}

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```

第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象 push 到数组userList，添加完之后，把userName, age清空，那么两个输入框的内容就会被清空

```xhtml

window.onload = function () {

var c = new Vue({

el: '#box',

data: {

userList: [],

userName : '',

age : ''

}

});

}

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

{{$index+1}}

{{value.name}}

{{value.age}}

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```

第五步、结合数组的长度与v-show指令，实现提示信息的显示与隐藏

```xhtml

window.onload = function () {

var c = new Vue({

el: '#box',

data: {

userList: [],

userName : '',

age : ''

},

methods : {

addUser : function(){

this.userList.push({

name : this.userName,

age : this.age

});

this.userName = ''; //添加完用户之后，把输入框的值清除

this.age = '';

}

}

});

}

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

{{$index+1}}

{{value.name}}

{{value.age}}

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```

第六步、实现删除某行数据

```xhtml

window.onload = function () {

var c = new Vue({

el: '#box',

data: {

userList: [],

userName : '',

age : '',

curIndex : -10

},

methods : {

addUser : function(){

this.userList.push({

name : this.userName,

age : this.age

});

this.userName = ''; //添加完用户之后，把输入框的值清除

this.age = '';

},

deleteRow : function( n ){

this.userList.splice( n, 1 );

}

}

});

}

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

{{$index+1}}

{{value.name}}

{{value.age}}

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```

第七步、实现删除全部行

```xhtml

window.onload = function () {

var c = new Vue({

el: '#box',

data: {

userList: [],

userName: '',

age: '',

curIndex: -10

},

methods: {

addUser: function () {

this.userList.push({

name: this.userName,

age: this.age

});

this.userName = ''; //添加完用户之后，把输入框的值清除

this.age = '';

},

deleteRow: function (n) {

if (n == -1) { //当n=-1的时候,清空数组，就是删除全部

this.userList = [];

} else {

this.userList.splice(n, 1);

}

}

}

});

}

用户名:

年　龄:

用户信息表

序号

名字

年龄

操作

{{$index+1}}

{{value.name}}

{{value.age}}

删除

删除全部

暂无数据....

×

确认删除么?

取消

确认

```