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

本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码，供大家参考，具体内容如下

小记：

1.v-model=""    用于input表单双向数据绑定  逻辑层跟渲染层双向绑定

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

3.v-for='(item,index) in myData'   遍历数组  {{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"    直接绑定点击事件改变逻辑层的数据  currentUser这里是逻辑层的数据 

6.v-show="myData.length!=0"   v-show根据后面的布尔值觉得显示还是隐藏  可直接用逻辑层的数据进行判断

7.

 
 
 
 

 
 
 
 



 
 
 

 用户名：
 
 
 

 年 龄：
 
 
 

 
 
 
 
 

 
用户信息表
 

 
序号
 
姓名
 
年龄
 
操作
 
 

 
{{index}}
 
{{item.name}}
 
{{item.age}}
 

 删除
 
 
 

 

 全部删除
 
 
 

 

 
暂无数据...
 
 
 
 

 

 

 

  
  ×
  
  
确认删除吗？
 
 

  取消
  确认