国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

vue實現留言板todolist功能

來源：懂視網 責編：小采 時間：2020-11-27 22:32:46
文檔

vue實現留言板todolist功能

vue實現留言板todolist功能:通過前面兩篇文章的的學習，我們掌握了vue的基本用法. 本文，就利用這些基礎知識來實現一個留言板， 老外把他稱之為todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang=en> <
推薦度：
導讀vue實現留言板todolist功能:通過前面兩篇文章的的學習，我們掌握了vue的基本用法. 本文，就利用這些基礎知識來實現一個留言板， 老外把他稱之為todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang=en> <

通過前面兩篇文章的的學習，我們掌握了vue的基本用法. 本文，就利用這些基礎知識來實現一個留言板， 老外把他稱之為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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>
</div>
</body>
</html>

第二步、增加模態框，模態框默認為隱藏的

<!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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>

 <!--模態框 彈出框-->
 <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">確認刪除么?</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">確認</button>
 </div>
 </div>
 </div>
 </div>


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

第三步、定義userList用來保存用戶，userName保存用戶名, age保存用戶變量，  然后把userName和age 通過 v-model指令綁定到對應的輸入框，實現輸入框與變量中的數據雙向驅動，在表格的行中輸出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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>

 <!--模態框 彈出框-->
 <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">確認刪除么?</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">確認</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第四步、添加用戶，點擊添加按鈕，把輸入框中的數據作為一個對象 push 到數組userList，添加完之后，把userName, age清空，那么兩個輸入框的內容就會被清空

<!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">序號</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>暫無數據....</p>
</td>
</tr>
</table>

<!--模態框 彈出框-->
<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">確認刪除么?</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">確認</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

第五步、結合數組的長度與v-show指令，實現提示信息的顯示與隱藏

<!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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>

 <!--模態框 彈出框-->
 <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">確認刪除么?</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">確認</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第六步、實現刪除某行數據

<!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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>

 <!--模態框 彈出框-->
 <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">確認刪除么?</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);">確認</button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

第七步、實現刪除全部行

<!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) { //當n=-1的時候,清空數組，就是刪除全部
 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">序號</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>暫無數據....</p>
 </td>
 </tr>
 </table>

 <!--模態框 彈出框-->
 <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">確認刪除么?</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);">確認
 </button>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue實現留言板todolist功能

vue實現留言板todolist功能:通過前面兩篇文章的的學習，我們掌握了vue的基本用法. 本文，就利用這些基礎知識來實現一個留言板， 老外把他稱之為todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang=en> <
推薦度：
標簽： 功能 VUE 留言板
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 永久免费观看的毛片的网站下载 | 欧美二区三区 | 免费黄a | 国产亚洲一区二区三区不卡 | 日韩在线视频线视频免费网站 | 亚洲毛片视频 | 欧美一级xxx| 欧美中文一区 | 青春草视频在线 | 久久亚洲精品国产精品婷婷 | 国产欧美日韩精品第二区 | 精品国产日韩亚洲一区在线 | 欧美精品一区二区在线观看播放 | 亚洲性久久久影院 | 日韩欧美精品 | 99国产精品久久久久久久成人热 | 欧美高清免费 | 日韩经典第一页 | 青草青草伊人精品视频 | 亚洲一二三区在线观看 | 欧美一区二区免费 | 国产精品视频播放 | 亚洲欧洲在线视频 | 久久国产成人午夜aⅴ影院 久久国产精品成人免费古装 | 91麻豆视频网站 | 久久精品国产一区二区三区不卡 | 久久福利一区二区 | 人与鲁牲交持级毛片 | 在线观看日韩视频 | 在线视频区 | 国产视频在| 亚洲精品日韩专区在线观看 | 91精品久久 | 欧美日韩国产色 | 亚洲欧美激情精品一区二区 | 国产日韩欧美一区 | 国产一区91 | 国产伦精品一区二区三区在线观看 | 国产精品3p视频 | 欧美性另类69xxx | 劲爆欧美精品13页 |