vue和bootstrap实现简单的用户信息添加和删除功能

本文分享了vue和bootstrap添加和删除用户信息的具体代码，供大家参考。具体内容如下

注释：

1.v-model=' '用于输入表单的双向数据绑定，逻辑层与渲染层双向绑定

2 . v-: click=' add()'单击方法绑定

3.v-for='(item，index)在myData '遍历数组{{index}} {{item。name}} {{item。age}}适用于vue 2.0版

4.我的数据中的v-for='(项、索引、键)遍历json {{index}} {{item}} {{key}}适用于vue 2.0版本

5.v-: click=' currentUser=index '直接绑定click事件更改逻辑层数据currentUser这里是逻辑层的数据

6.v-show='myData.length！=0' v-show可以根据逻辑层后面的布尔值直接由逻辑层的数据来判断

7.div class=' modal ' role=' dialog ' id=' layer ' modal dialog是用于联系触发器元素的掩码框id

8.data-toggle='modal '交替显示隐藏掩码框。data-target='#layer '确定目标模式框

9.单击后，目标元素消失

渲染：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scalable=no，初始比例=1.0 '标题文档/标题！-最新版本的引导程序核心半铸钢钢性铸铁(铸造半钢)文件- link rel='样式表href=' https://cdn。bootscs。com/bootstrap/3。1 .0/CSS/bootstrap。量滴CSS ' rel='外部' nofollow '脚本' src='./jquery-3。2 .1 .量滴js '/script script src=' bootstrap。js '/script script src=' vue。js '/脚本样式表td {垂直-对齐：中间！重要；}/style/head dydiv class=' container ' form action=' role=' form ' class=' div class=' form-group '标签为='username' class=' '用户名：/标签输入类型=' text ' id=' username ' class=' form-control ' v-model=' username ' placeholder='请输入用户名/div class=' form-group '标签为='年龄'年龄：/标签输入类型=' text ' id=' age ' class=' form-control ' v-model=' age '占位符='请输入年龄/div div class='form-group '输入类型='按钮'值='添加=' BTN BTN-小学' v-:点击='添加()'输入类型='重置'值='重置BTNBTN警告/div/form table class=' table table-带边框的表格-悬停标题类=' H4文本信息文本中心'用户信息表/caption tr class=' text-danger ' th class=' text-center '序号' th class='文本中心'姓名' th class='文本中心'年龄' th class='文本中心'操作/th/tr class=' text-center ' v-for='(item，index)在my DATa ' TD { { index } }/TD { { item }中。 名称} }/TD { { item。age } }/TD TD TD button class=' BTN BTN-危险BTN-xs ' data-toggle=' modal ' data-target=' # layer ' v-: click=' currentUser=index '删除/button/TD/tr tr v-show=' my DATa。长度！=0 ' TD col span=' 4 ' class=' text-right ' button class=' BTN BTN-危险BTN-xs ' v-: click=' currentUser=' all ' ' data-toggle=' modal ' data-target=' # layer '全部删除/button/TD/tr v-show=' my DATa。长度==0 ' TD colspan=' 4 ' class=' text-center ' p class=' text-静音'暂无数据./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-mission=' modal ' span/span/button H4 class=' modal-title '确认删除吗？/H4/div div class=' modal-body text-right '按钮class=' BTN BTN-主BTN-sm '数据-dispose=' modal '取消/button button class=' BTNBTN-危险BTN-sm ' data-mission=' modal ' v-: click=' delete user()'确认/button/div/div/body/html脚本var c=new Vue({ El : ' .容器，数据： { mydata : [{ name : }张三，年龄：20},{姓名： '李四，年龄：20},{姓名： '王五，年龄：20}，]，username: ' '，年龄： ' '，currentUser :-100，}，方法： {删除用户3360函数(){ if(this。currentUser==' all '){ this。my data=[]；} else { this。我的数据。拼接(这个。currentuser，1)；} },添加：函数(){ if (this.username！这个年龄！=0){ this。我的数据。推送({ name : this。用户名，年龄： thi . age })}，} })/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。