使用Bootstrap + Vue.js實現(xiàn)添加刪除數(shù)據(jù)示例
界面首先需要引入bootstrap的css和bootstrap的js文件,還有vue.js和jQuery.js才可以看見效果。
這里提供bootstrap的在線文件給大家引用:
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
效果如下圖所示,輸入用戶名和年齡,點擊添加,數(shù)據(jù)會自動添加到下面的用戶信息表內(nèi)。當沒有數(shù)據(jù)時,用戶信息表顯示:暫無數(shù)據(jù)……,當有數(shù)據(jù)時,顯示 刪除全部 按鈕,這里為了方便快捷,我沒有做刪除按鈕的彈出框,所以 點擊刪除按鈕 會直接刪除掉當前這條數(shù)據(jù)。
<div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用戶名:</label> <input type="text" id="username" class="form-control" placeholder="請輸入用戶名" v-model="username" /> </div> <div class="form-group"> <label for="age">年齡:</label> <input type="text" id="age" class="form-control" placeholder="請輸入年齡" v-model="age" /> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary" v-on:click="add()" /> <input type="reset" value="重置" class="btn btn-danger" /> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="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+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td> <button class="btn btn-primary btn-sm" v-on:click="deleteMsg()">刪除</button> </td> </tr> <tr v-show="myData.length!==0"> <td colspan="4" class="text-right"> <button class="btn btn-danger" v-on:click="all()">刪除全部</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="4" class="text-center text-muted"> <p>暫無數(shù)據(jù)……</p> </td> </tr> </table> </div>
window.onload = function(){ new Vue({ el:"#box", data:{ myData:[], username:'', age:'', nowIndex:-100 }, methods:{ add:function(){ this.myData.push({ name:this.username, age:this.age }); this.username=''; this.age=''; }, deleteMsg:function(){ this.myData.splice(0,1) }, all:function(){ this.myData = []; } } }) }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細的代碼講解和實現(xiàn)思路,講解的非常詳細,有需要的朋友可以參考下2023-08-08Vue3響應(yīng)式對象Reactive和Ref的用法解讀
這篇文章主要介紹了Vue3響應(yīng)式對象Reactive和Ref的用法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue中報錯“error‘xxx‘?is?defined?but?never?used”問題及解決
介紹了兩種解決代碼導(dǎo)入問題的方法:單一代碼解決和全局解決,第一種方法是在代碼前面添加特定代碼并保存;第二種方法是在package.json中添加代碼后重啟項目,這些方法可以有效解決導(dǎo)包錯誤提示,希望對大家有幫助2024-10-10詳解Vue項目在其他電腦npm run dev運行報錯的解決方法
這篇文章主要介紹了詳解Vue項目在其他電腦npm run dev運行報錯的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實現(xiàn)方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09