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

最新推荐文章于 2024-04-24 14:47:12 发布

monkeyhlj

最新推荐文章于 2024-04-24 14:47:12 发布

阅读量632

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/hhhmonkey/article/details/118684394

前端学习专栏收录该内容

53 篇文章

订阅专栏

文章目录

- 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的最大值+1
                if(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模块化概念

在这里插入图片描述