Vue指令实战：结合bootstrap做一个用户信息输入表格

2024-11-20 技术教程

结合前面的vue指令做了个小例子，用户在表单里面输入用户名和年龄，点击“添加”以后会保存到用户信息表里面

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="renderer"content="webkit"><linkrel="stylesheet"href="resources/css/bootstrap.min.css"/><title></title></head><body><divclass="container"id="box"><formrole="form"><divclass="form-group"><labelfor="uName">用户名：</label><inputtype="text"id="uName"class="form-control"v-model="userName"></div><divclass="form-group"><labelfor="age">年龄：</label><inputtype="text"id="age"class="form-control"v-model="userAge"></div><divclass="form-group"><inputtype="button"value="添加"class="btnbtn-primary"@click="add"><inputtype="reset"value="重置"class="btnbtn-success"></div></form><hr><tableclass="tabletable-borderedtable-hover"><captionclass="h3text-center">用户信息表</caption><thead><trclass="text-info"><thclass="text-center">序号</th><thclass="text-center">名字</th><thclass="text-center">年龄</th><thclass="text-center">操作</th></tr></thead><tbody><trclass="text-center"v-for="iteminmyData"><td>{{$index+1}}</td><td>`item`.`name`</td><td>`item`.`age`</td><td><buttonclass="btnbtn-infobtn-sm"data-toggle="modal"data-target="#layer"@click="nowIndex=$index">删除</button></td></tr><trclass="text-right"v-show="myData.length!=0"><tdcolspan="4"><buttonclass="btnbtn-dangerbtn-sm"data-toggle="modal"data-target="#layer"@click="nowIndex=-2">全部删除</button></td></tr><trclass="text-centertext-muted"v-show="myData.length==0"><tdcolspan="4"><p>暂无数据……</p></td></tr></tbody></table><divclass="modalfade"role="dialog"id="layer"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><span>×</span></button><h5class="modal-title">确认删除吗？</h5></div><divclass="modal-bodytext-right"><buttontype="button"class="btnbtn-default"data-dismiss="modal">取消</button><buttontype="button"class="btnbtn-primary"data-dismiss="modal"@click="remove(nowIndex)">确认</button></div></div></div></div></div><scriptsrc="resources/js/jquery-1.9.1.min.js"></script><scriptsrc="resources/js/bootstrap.min.js"></script><scriptsrc="resources/js/vue.js"></script><script>varvm=newVue({el:'#box',data:{myData:[],userName:'',userAge:'',nowIndex:'-100'//需要特别注意nowIndex的用法},methods:{add:function(){this.myData.push({name:this.userName,age:this.userAge});this.userName='';this.userAge='';},remove:function(n){if(n==-2){//如果点击的是“全部删除”，则清空整个数组this.myData=[];}else{//如果点击的是单行内的“删除”，则删除该行即可this.myData.splice(n,1)}}}})</script></body></html>