这篇文章主要为大家详细介绍了vue与bootstrap实现简单用户信息添加删除功能,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!
本文实例为大家分享了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.
8. data-toggle='modal' 交替显示隐藏遮罩框 data-target='#layer' 确定目标模态框
9. data-dismiss='modal' 点击后消失目标元素
效果图:
【图片暂缺】
代码如下:
Documenttable td {vertical-align: middle !important;}
用户名:
年 龄:
序号 | 姓名 | 年龄 | 操作 |
---|---|---|---|
{{index}} | {{item.name}} | {{item.age}} | 删除 |
全部删除 | |||
暂无数据... |
代码如下:
var c = new Vue({
el:'.container',
data:{
myData:[
{name:"张三",age:20},
{name:"李四",age:20},
{name:"王五",age:20},
],
username:"",
age:"",
currentUser :-100,
},
methods : {
deleteuser :function(){
if (this.currentUser == 'all') {
this.myData = [];
}else{
this.myData.splice(this.currentUser,1);
}
},
add : function(){
if (this.username!=""&&this.age!=0) {
this.myData.push({
name:this.username,
age:this.age
})
}
},
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。
注:关于vue与bootstrap实现简单用户信息添加删除功能的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:vue.js