使用Bootstrap + Vue.js實(shí)現(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>
效果如下圖所示,輸入用戶名和年齡,點(diǎn)擊添加,數(shù)據(jù)會(huì)自動(dòng)添加到下面的用戶信息表內(nèi)。當(dāng)沒有數(shù)據(jù)時(shí),用戶信息表顯示:暫無數(shù)據(jù)……,當(dāng)有數(shù)據(jù)時(shí),顯示 刪除全部 按鈕,這里為了方便快捷,我沒有做刪除按鈕的彈出框,所以 點(diǎn)擊刪除按鈕 會(huì)直接刪除掉當(dāng)前這條數(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="請(qǐng)輸入用戶名" v-model="username" /> </div> <div class="form-group"> <label for="age">年齡:</label> <input type="text" id="age" class="form-control" placeholder="請(qǐng)輸入年齡" 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">序號(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="(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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2022-12-12基于Vue?+?ElementUI實(shí)現(xiàn)可編輯表格及校驗(yàn)
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實(shí)現(xiàn)可編輯表格及校驗(yàn),文中有詳細(xì)的代碼講解和實(shí)現(xiàn)思路,講解的非常詳細(xì),有需要的朋友可以參考下2023-08-08Vue3響應(yīng)式對(duì)象Reactive和Ref的用法解讀
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象Reactive和Ref的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue中報(bào)錯(cuò)“error‘xxx‘?is?defined?but?never?used”問題及解決
介紹了兩種解決代碼導(dǎo)入問題的方法:單一代碼解決和全局解決,第一種方法是在代碼前面添加特定代碼并保存;第二種方法是在package.json中添加代碼后重啟項(xiàng)目,這些方法可以有效解決導(dǎo)包錯(cuò)誤提示,希望對(duì)大家有幫助2024-10-10詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法
這篇文章主要介紹了詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示
表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04詳解基于vue-router的動(dòng)態(tài)權(quán)限控制實(shí)現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動(dòng)態(tài)權(quán)限實(shí)現(xiàn)方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09