當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/1/23 vue 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 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模块化概念）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue学习（常用实例、脚手架搭建）-学习
下一篇： Vue学习（组件的定义及调用、路由）-学