使用vue和bootstrap怎么實現(xiàn)一個用戶信息添加刪除功能
本篇文章給大家分享的是有關(guān)使用vue和bootstrap怎么實現(xiàn)一個用戶信息添加刪除功能，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元離石做網(wǎng)站,已為上家服務(wù),為離石各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
1.v-model="" 用于input表單雙向數(shù)據(jù)綁定 邏輯層跟渲染層雙向綁定
2.v-on:click='add()' click方法綁定
3.v-for='(item,index) in myData' 遍歷數(shù)組 {{index}} {{item.name}} {{item.age}} 適用于vue版本2.0
4.v-for='(item,index,key) in myData' 遍歷json {{index}} {{item}} {{key}} 適用于vue版本2.0
5.v-on:click="currentUser=index" 直接綁定點(diǎn)擊事件改變邏輯層的數(shù)據(jù) currentUser這里是邏輯層的數(shù)據(jù)
6.v-show="myData.length!=0" v-show根據(jù)后面的布爾值覺得顯示還是隱藏 可直接用邏輯層的數(shù)據(jù)進(jìn)行判斷
7.<div class="modal" role='dialog' id="layer"> modal dialog為遮罩框 id用來聯(lián)系觸發(fā)元素
8. data-toggle='modal' 交替顯示隱藏遮罩框 data-target='#layer' 確定目標(biāo)模態(tài)框
9. data-dismiss='modal' 點(diǎn)擊后消失目標(biāo)元素
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" >
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="external nofollow" >
<script src='../jquery-3.2.1.min.js'></script>
<script src='bootstrap.js'></script>
<script src='vue.js'></script>
<style>
table td {vertical-align: middle !important;}
</style>
</head>
<body>
<div class="container">
<form action="" role='form' class="">
<div class="form-group">
<label for="username" class="">用戶名：</label>
<input type="text" id="username" class="form-control" v-model="username" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="age">年 齡：</label>
<input type="text" id="age" class="form-control" v-model="age" placeholder="請輸入年齡">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click='add()'>
<input type="reset" value="重置" class="btn btn-warning">
</div>
</form>
<table class="table table-bordered table-hover">
<caption class="h5 text-info text-center">用戶信息表</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='(item,index) in myData'>
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-danger btn-xs" data-toggle='modal' data-target='#layer' v-on:click="currentUser=index">刪除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-xs" v-on:click='currentUser="all"' data-toggle='modal' data-target="#layer">全部刪除</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center">
<p class="text-muted">暫無數(shù)據(jù)...</p>
</td>
</tr>
</table>
<div class="modal fade bs-example-modal-sm" role='dialog' id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss='modal'>
<span>×</span>
</button>
<h5 class="modal-title">確認(rèn)刪除嗎？</h5>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss='modal'>取消</button>
<button class="btn btn-danger btn-sm" data-dismiss='modal' v-on:click="deleteuser()">確認(rèn)</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html><script>
var c = new Vue({
el:'.container',
data:{
myData:[
{name:"張三",age:20},
{name:"李四",age:20},
{name:"王五",age:20},
],
username:"",
age:"",
currentUser :-100,
},
methods : {
deleteuser :function(){
if (this.currentUser == 'all') {
this.myData = [];
}else{
this.myData.splice(this.currentUser,1);
}
},
add : function(){
if (this.username!=""&&this.age!=0) {
this.myData.push({
name:this.username,
age:this.age
})
}
},
}
})
</script>為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
以上就是使用vue和bootstrap怎么實現(xiàn)一個用戶信息添加刪除功能，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目：使用vue和bootstrap怎么實現(xiàn)一個用戶信息添加刪除功能
文章路徑：http://www.yijiale78.com/article4/gcshoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、ChatGPT、App設(shè)計、全網(wǎng)營銷推廣、云服務(wù)器、移動網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
