vue實(shí)現(xiàn)留言板todolist功能

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:46

vue實(shí)現(xiàn)留言板todolist功能

vue實(shí)現(xiàn)留言板todolist功能:通過(guò)前面兩篇文章的的學(xué)習(xí)，我們掌握了vue的基本用法. 本文，就利用這些基礎(chǔ)知識(shí)來(lái)實(shí)現(xiàn)一個(gè)留言板，老外把他稱之為todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang=en> <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue實(shí)現(xiàn)留言板todolist功能:通過(guò)前面兩篇文章的的學(xué)習(xí)，我們掌握了vue的基本用法. 本文，就利用這些基礎(chǔ)知識(shí)來(lái)實(shí)現(xiàn)一個(gè)留言板，老外把他稱之為todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang=en> <

通過(guò)前面兩篇文章的的學(xué)習(xí)，我們掌握了vue的基本用法. 本文，就利用這些基礎(chǔ)知識(shí)來(lái)實(shí)現(xiàn)一個(gè)留言板，老外把他稱之為todolist.

第一步、使用bootstrap做好布局

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
</head>
<body>
<div class="container">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center">
 <td>1</td>
 <td>張三</td>
 <td>20</td>
 <td>
 <button class="btn btn-primary btn-sm">刪除</button>
 </td>
 </tr>
 <tr class="text-center">
 <td>2</td>
 <td>李四</td>
 <td>22</td>
 <td>
 <button class="btn btn-primary btn-sm">刪除</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm">刪除全部</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>
</div>
</body>
</html>

第二步、增加模態(tài)框，模態(tài)框默認(rèn)為隱藏的

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
</head>
<body>
<div class="container">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center">
 <td>1</td>
 <td>張三</td>
 <td>20</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
 </td>
 </tr>
 <tr class="text-center">
 <td>2</td>
 <td>李四</td>
 <td>22</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm">刪除全部</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>

 <!--模態(tài)框 彈出框-->
 <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">
 <span>×</span>
 </button>
 <h4 class="modal-title">確認(rèn)刪除么?</h4>
 </div>
 <div class="modal-body text-right">
 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 <button data-dismiss="modal" class="btn btn-danger btn-sm">確認(rèn)</button>
 </div>
 </div>
 </div>
 </div>


</div>
</body>
</html>

第三步、定義userList用來(lái)保存用戶，userName保存用戶名, age保存用戶變量，然后把userName和age 通過(guò) v-model指令綁定到對(duì)應(yīng)的輸入框，實(shí)現(xiàn)輸入框與變量中的數(shù)據(jù)雙向驅(qū)動(dòng)，在表格的行中輸出userList

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
 <script src="../js/vue.js"></script>
 <script>
 window.onload = function () {
 var c = new Vue({
 el: '#box',
 data: {
 userList: [],
 userName : '',
 age : ''
 }
 });
 }
 </script>
</head>
<body>
<div class="container" id="box">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" v-model="userName" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" v-model="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center" v-for="value in userList">
 <td>{{$index+1}}</td>
 <td>{{value.name}}</td>
 <td>{{value.age}}</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm">刪除全部</button>
 </td>
 </tr>
 <tr>
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>

 <!--模態(tài)框 彈出框-->
 <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">
 <span>×</span>
 </button>
 <h4 class="modal-title">確認(rèn)刪除么?</h4>
 </div>
 <div class="modal-body text-right">
 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 <button data-dismiss="modal" class="btn btn-danger btn-sm">確認(rèn)</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第四步、添加用戶，點(diǎn)擊添加按鈕，把輸入框中的數(shù)據(jù)作為一個(gè)對(duì)象 push 到數(shù)組userList，添加完之后，把userName, age清空，那么兩個(gè)輸入框的內(nèi)容就會(huì)被清空

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap.min.css"/>
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: '#box',
data: {
userList: [],
userName : '',
age : ''
}
});
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" id="username" v-model="userName" class="form-control" placeholder="輸入用戶名">
</div>
<div class="form-group">
<label for="age">年　齡:</label>
<input type="text" id="age" v-model="age" class="form-control" placeholder="輸入年齡">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary">
<input type="button" value="重置" class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h2 text-info">用戶信息表</caption>
<tr class="text-danger">
<th class="text-center">序號(hào)</th>
<th class="text-center">名字</th>
<th class="text-center">年齡</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="value in userList">
<td>{{$index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm">刪除全部</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-center text-muted">
<p>暫無(wú)數(shù)據(jù)....</p>
</td>
</tr>
</table>

<!--模態(tài)框 彈出框-->
<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">
<span>×</span>
</button>
<h4 class="modal-title">確認(rèn)刪除么?</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm">確認(rèn)</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

第五步、結(jié)合數(shù)組的長(zhǎng)度與v-show指令，實(shí)現(xiàn)提示信息的顯示與隱藏

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
 <script src="../js/vue.js"></script>
 <script>
 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 = '';
 }
 }
 });
 }
 </script>
</head>
<body>
<div class="container" id="box">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" v-model="userName" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" v-model="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center" v-for="value in userList">
 <td>{{$index+1}}</td>
 <td>{{value.name}}</td>
 <td>{{value.age}}</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
 </td>
 </tr>
 <tr v-show="userList.length!=0">
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm">刪除全部</button>
 </td>
 </tr>
 <tr v-show="userList.length==0">
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>

 <!--模態(tài)框 彈出框-->
 <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">
 <span>×</span>
 </button>
 <h4 class="modal-title">確認(rèn)刪除么?</h4>
 </div>
 <div class="modal-body text-right">
 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 <button data-dismiss="modal" class="btn btn-danger btn-sm">確認(rèn)</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第六步、實(shí)現(xiàn)刪除某行數(shù)據(jù)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
 <script src="../js/vue.js"></script>
 <script>
 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 );
 }
 }
 });
 }
 </script>
</head>
<body>
<div class="container" id="box">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" v-model="userName" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" v-model="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center" v-for="value in userList">
 <td>{{$index+1}}</td>
 <td>{{value.name}}</td>
 <td>{{value.age}}</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">刪除</button>
 </td>
 </tr>
 <tr v-show="userList.length!=0">
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm">刪除全部</button>
 </td>
 </tr>
 <tr v-show="userList.length==0">
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>

 <!--模態(tài)框 彈出框-->
 <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">
 <span>×</span>
 </button>
 <h4 class="modal-title">確認(rèn)刪除么?</h4>
 </div>
 <div class="modal-body text-right">
 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">確認(rèn)</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第七步、實(shí)現(xiàn)刪除全部行

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 <script src="lib/jquery-1.7.2.js"></script>
 <script src="lib/bootstrap.js"></script>
 <script src="../js/vue.js"></script>
 <script>
 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) { //當(dāng)n=-1的時(shí)候,清空數(shù)組，就是刪除全部
 this.userList = [];
 } else {
 this.userList.splice(n, 1);
 }
 }
 }
 });
 }
 </script>
</head>
<body>
<div class="container" id="box">
 <form role="form">
 <div class="form-group">
 <label for="username">用戶名:</label>
 <input type="text" id="username" v-model="userName" class="form-control" placeholder="輸入用戶名">
 </div>
 <div class="form-group">
 <label for="age">年　齡:</label>
 <input type="text" id="age" v-model="age" class="form-control" placeholder="輸入年齡">
 </div>
 <div class="form-group">
 <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
 <input type="button" value="重置" class="btn btn-danger">
 </div>
 </form>
 <hr>
 <table class="table table-bordered table-hover">
 <caption class="h2 text-info">用戶信息表</caption>
 <tr class="text-danger">
 <th class="text-center">序號(hào)</th>
 <th class="text-center">名字</th>
 <th class="text-center">年齡</th>
 <th class="text-center">操作</th>
 </tr>
 <tr class="text-center" v-for="value in userList">
 <td>{{$index+1}}</td>
 <td>{{value.name}}</td>
 <td>{{value.age}}</td>
 <td>
 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
 v-on:click="curIndex=$index">刪除
 </button>
 </td>
 </tr>
 <tr v-show="userList.length!=0">
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-sm" v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer">
 刪除全部
 </button>
 </td>
 </tr>
 <tr v-show="userList.length==0">
 <td colspan="4" class="text-center text-muted">
 <p>暫無(wú)數(shù)據(jù)....</p>
 </td>
 </tr>
 </table>

 <!--模態(tài)框 彈出框-->
 <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">
 <span>×</span>
 </button>
 <h4 class="modal-title">確認(rèn)刪除么?</h4>
 </div>
 <div class="modal-body text-right">
 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">確認(rèn)
 </button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue實(shí)現(xiàn)留言板todolist功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：功能 VUE 留言板

熱門(mén)焦點(diǎn)

vue實(shí)現(xiàn)留言板todolist功能

vue實(shí)現(xiàn)留言板todolist功能

vue實(shí)現(xiàn)留言板todolist功能

最新推薦

猜你喜歡

熱門(mén)推薦