Vue学习（增删改查、ES6模块化概念）-学习笔记

文章目录

Vue学习（增删改查、ES6模块化概念）-学习笔记
- 增删改查案例
- ES6模块化概念

Vue学习（增删改查、ES6模块化概念）-学习笔记

增删改查案例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>用户列表checkbox选项操作（全选）</title><link rel="stylesheet" type="text/css" href="css/index.css"><script src='js/vue.js'></script><script src='js/axios.js'></script><script src='js/index.js'></script>
</head><body><div id='demo'><div class="panel"><div class="left"><input class="search-input" type="text" placeholder="请输入需要查询姓名" v-model="searchName" /></div><button class="add" @click="addOrUpdate('add')">新增</button><button class="delete" @click="bulkDel()">批量删除</button></div><table class="table"><thead><tr><th><input type="checkbox" /></th><th>用户姓名</th><th>用户性别</th><th>所在城市</th><th>操作</th></tr></thead><tbody><tr class="no-data" v-show="searchFor.length==0"> <td colspan="5">暂无数据</td></tr><tr v-for="(v,i) in searchFor" :key="v.id"><td><input type="checkbox" v-model="v.check"></td><td>{{v.name}}</td><td>{{v.sex}}</td><td>{{v.city}}</td><td><button class="edit" @click="addOrUpdate('edit',v)">修改</button><button class="delete" @click="del(i)">删除</button></td></tr></tbody></table><!-- 添加编辑弹层 --><div class="modal" v-show="editModal"><div class="container"><div class="header"> {{curState=='add'?'添加':'修改'}}<div class="close" @click="editModal=false"> X</div></div><div class="info"><div><label for="姓名">姓名：</label><input type="text" placeholder="请输入姓名" v-model="createData.name"></div><div><label for="性别">性别：</label><input type="radio" name="radio" value="男" v-model="createData.sex"/>男<input type="radio" name="radio" value="女" v-model="createData.sex"/>女</div><div><label for="城市">城市：</label><select v-model="createData.city"> <option value="0" disabled>请选择</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="湖北">湖北</option><option value="湖南">湖南</option></select></div>   </div><div class="footer"><button class="confirm" @click="changeItem()">{{curState=='add'?'添加':'修改'}}</button><button class="cancel"  @click="editModal=false">取消</button></div></div></div><!-- 删除弹层 --><div class="modal" v-show="delModal"><div class="tips"><div class="header"> 提示<div class="close" @click="delModal=false"> X</div></div><div class="content"><h4>确定删除所选用户么？</h4></div><div class="footer"><button class="confirm" @click="delItem()">确定</button><button class="cancel" @click="delModal=false">取消</button></div></div></div>
</body>
</html>

window.onload = function(){new Vue({el:"#demo",data:{lists:[{id:1,name:'张三',sex:'男',city:'北京',check:false},{id:2,name:'李四',sex:'女',city:'上海',check:true}],createData:{name:'',sex:'男',city:'0'},editModal:false, //编辑 或添加弹层delModal:false, //删除弹层curIndex:1,  //当前索引curState:'add', //当前判断是添加、修改searchName:'',//模糊匹配},computed:{  //计算属性searchFor(){if(!this.searchName) return this.lists;  //没有内容匹配的全部的数据return this.lists.filter(item=>item.name.includes(this.searchName));}},methods:{addOrUpdate(state,v){  //添加、编辑this.editModal = true; //弹层显示this.curState = state; if(v){  //如果是编辑this.createData={name:v.name,sex:v.sex,city:v.city,id:v.id}}},changeItem(){  //var {id,name,sex,city} = this.createData;if(!name||!sex||!city||city=='0') return;var _id = Math.max(...this.lists.map(v=>v.id))+1; //最ID的最大值+1if(this.curState=='add'){this.lists.unshift({name:name,sex:sex,city:city,id:_id});}else {for(var i=0;i<this.lists.length;i++){if(this.lists[i].id == this.createData.id){this.lists[i] = this.createData}}}//初始化this.createData={name:'',sex:'男',city:'0'};this.editModal = false; //弹层},del(i){  //删除this.delModal = true;this.curIndex = i;},delItem(){  //弹层删除this.lists.splice(this.curIndex,1);this.delModal = false;},bulkDel(){  //批量删除this.lists = this.lists.filter(item=>!item.check);}}})
}

body{margin: 0 50px;
}
ul {list-style-type:none;
}
.table{width: 70%;border-collapse: collapse;margin: 0 auto;text-align: center;
}
.table td,
.table th{border: 1px solid #ddd;padding: 10px;
}
.table thead tr {background:#1f76b3;color:#fff;
}
button{padding: 4px;border: 1px solid #367eb3;margin: 0 6px 0;border-radius: 4px;background: white;color: #367eb3;
}
button .disable{color: gray;
}
.panel{width: 70%;margin: 10px auto;text-align: left;
}
.panel .left{display: inline-block;
}
.left{width: 60%;text-align: left;
}
.left .search-input{height: 32px;line-height: 32px;border: 1px solid #367eb3;border-radius: 4px;padding: 0 10px;width: 300px;
}
.search-btn{font-size:16px;color: white;   width: 80px;background: #367eb3;margin-top: 2px;
}.panel button{font-size:16px;color: white;   width: 80px;float: right;
}
.add{background: #367eb3;}
.panel .delete{background: rgb(187, 92, 92);border: 1px solid #c45b5b;
}.table .delete{color: rgb(187, 92, 92);border: 1px solid #c45b5b;
}.table .disable{color: gray;border: 1px solid gray;
}
.table .edit{color: rgb(116, 211, 116);border: 1px solid #5bc464;
}/* 弹层样式 */
.modal{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color: rgb(0,0,0,0.5);
}
.modal .container{width: 400px;height: 400px;background-color: #fff;left: 50%;top:50%;margin-top: -250px;margin-left: -200px;box-sizing: border-box;border-radius: 6px;position: absolute;
}
.modal .close{width: 40px;height: 40px;line-height: 40px;border-radius: 6px;position: absolute;right: 0px;top: 0px;cursor: pointer;text-align: center;
}
.modal .container .info{padding: 20px;
}
.modal  .footer{width: 100%;bottom: 0;text-align: center;position: absolute;margin-bottom: 30px;
}
.modal input[type="text"],select {height: 28px;line-height: 28px;border: 1px solid #367eb3;border-radius: 4px;padding: 0 10px;width: 180px;
}
.modal .info div{margin-bottom: 10px;
}
.modal .info select{height: 32px;width: 200px;
}
.modal .footer button{width: 80px;font-size: 16px;color: white;border-radius: 4px;
}
.modal .footer .confirm{background-color:#367eb3;
}.modal  .footer .cancel{background: rgb(187, 92, 92);border: 1px solid #c45b5b;
}.modal .tips{width: 400px;height: 200px;background-color: #fff;left: 50%;top:50%;margin-top: -120px;margin-left: -200px;box-sizing: border-box;border-radius: 6px;position: absolute;
}
.modal .header{height: 40px;background-color:#367eb3;line-height: 40px;padding-left: 20px;
}
.modal .tips .content{text-align: center;
}

ES6模块化概念

Vue学习（增删改查、ES6模块化概念）-学习笔记相关推荐

express+mongodb+vue实现增删改查-全栈之路
vue element mongodb express 效果图前言最近一直想学下node,毕竟会node的前端更有市场.但是光看不练,感觉还是少了点什么,就去github上看别人写的项目,收获颇丰 ...
Django+Vue实现增删改查操作
一.静态路由 urlpatterns属性 urlpatterns是路由文件中的一个全局变量,用来存放路由及视图函数的映射关系用户发起的请求URL都会首先进入主控制目录下的这个urls.py文件中进行 ...
Oracle的登陆问题和初级学习增删改查(省略安装和卸载)
1:学习Oracle首先需要安装Oracle,网上已经有很多很多教程了,这里不做叙述,自己百度即可,这里安装的标准版,个人根据需求安装学习或者企业开发即可.如果安装出错,自己百度Oracle的卸载即可 ...
vue后台增删改查_Vue 原生实现商城购物车增删改查
业务分析: 1 .整个页面分为两种状态: 正常状态:选中商品显示总价,可结算编辑状态:选中商品增删改查,可删除页面状态直接影响底部栏的变化 2. 商品,店铺,全选两种状态都可三级联动 3. 编辑状 ...
【无标题】vue 简单增删改查表格
<template><div><h2>table简单增删改查</h2><input type="text" v-model=& ...
vue php 增删改查,vue的增删改查（简单版）
添加 {{index+1}}{{item.id}} {{item.name}} {{item.con}} {{item.time}} 编辑删除姓名内容时间更新取消 export defau ...
express+mongodb+vue实现增删改查-全栈之路2.0
Github项目地址效果图登陆页查询新增修改删除详情页技术栈 vue axios vue-router express mongo element iconfont scss 前言半 ...
vue的增删改查（elementUI）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
eggjs+vue+mysql增删改查demo
序: 1.博主用eggjs+vue+mysql 的组合写了个简单的demo. 2.博主为了这个demo整了90天,这90可以接多少外包,有什么比花10米投资在自己身上更有价值的. 注: 点击下载dem ...
vue实现增删改查功能
一.实现效果二.实现 1.实现增加用户功能 Vuserlist组件中 <template><div class="panel panel-default"> ...

Vue学习（增删改查、ES6模块化概念）-学习笔记

文章目录

Vue学习（增删改查、ES6模块化概念）-学习笔记

增删改查案例

ES6模块化概念

Vue学习（增删改查、ES6模块化概念）-学习笔记相关推荐

最新文章

热门文章