加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue实现留言板todolist功能

发布时间:2020-12-17 02:50:13 所属栏目:百科 来源:网络整理
导读:通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步、 使用bootstrap做好布局 暂无数据.... 第二步、 增加模态框,模态框默认为隐藏的 暂无数据.... div role="dialog" class=

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

第一步、

使用bootstrap做好布局


暂无数据....

<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×

第四步、

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

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>


暂无数据....

<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×

第五步、

结合数组的长度与v-show指令,实现提示信息的显示与隐藏

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>


暂无数据....

<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×

第六步、

实现删除某行数据

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>


暂无数据....

<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×

第七步

、实现删除全部行


暂无数据....

<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×