Vue实现 增删改查

按照升降序显示 遮挡层
css页面

<style>
        body {
            width: 100%;
            height: 100%;
        }

        #hide {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            position: fixed;
            top: 100px;
            left: 50%;
            transform: translate(-50%);
            z-index: 9999;
            background-color: #fff;
            padding: 20px;

        }

        /*!*遮挡层*! 首先放置一个空盒子，宽高100%，*/
        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            top: 0;
            left: 0;

        }

        .top {
            width: 100%;
            height: 10%;
            /* background-color: #eee; */
            display: flex;
            justify-content: space-between;
        }

        .btn {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.1);
        }
    </style>

html页面

<div id="app">
        <input type="text" placeholder="输入标题" v-model="obj.text">
        <input type="text" placeholder="姓名" v-model="obj.user">
        <button @click="add">提交留言</button>
        <button @click="sort(1)">按照升序显示</button>
        <button @click="sort(2)">按照降序序显示</button>
        <table border="1" width="800px" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>留言标题</th>
                <th>姓名</th>
                <th>留言时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(v,i) in list" :key="i">
                <td>{{i+1}}-- {{v.id}}</td>
                <td>{{v.text}}</td>
                <td>{{v.user}}</td>
                <td>{{v.time}}</td>
                <td>
                    <button @click="edit(v)">编辑</button>
                    <button @click="del(i)">删除</button>
                </td>
            </tr>
        </table>
      <!-- 遮挡层 -->
        <div class="mask" v-show="isShow"></div>
        <div id="hide" v-show="isShow">
            <div class="top">
                <span>编辑</span> <button @click="isShow=false">x</button>
            </div> <br><br>
            <input type="text" placeholder="输入标题" v-model="editData.text"> <br><br>
            <input type="text" placeholder="姓名" v-model="editData.user"> <br><br>
            <span class="btn" @click="isShow=false">
                取消
            </span>
            <span class="btn" @click="update">
                确定
            </span>
        </div>
    </div>

js页面

<script>
    new Vue({
        el: "#app",
        data: {
            obj: { //放在obj对象中  
                text: "",
                user: "",
            },
            isShow: false,
            list: [
                {text:"标题1",user:"lv1",time:"2020-5-30",id:6},
                {text:"标题2",user:"lv2",time:"2020-5-29",id:9},
                {text:"标题3",user:"lv5",time:"2020-5-28",id:8},
            ],
            editData: {} //编辑的数据
        },
        methods: {            
            add() { // 增加
            var {text,user} = this.obj;   //用解构
            if (!text || !user) return;
                var _id =Math.max(...this.list.map(item=>item.id))+1;
                this.list.unshift({
                    text: text,
                    user: user,
                    id:_id,
                    time: new Date().toLocaleString().replace(/\//g, '-'),
                    times: new Date().getTime()
                })
                this.obj = {} //清空输入框的数据
            },
            del(i) {  //删除
                this.list.splice(i, 1)
            },
            update(){ //更新 用id寻找
                for(var i=0; i<this.list.length; i++){
                    if(this.list[i].id == this.editData.id){
                        this.list[i]= this.editData;
                        this.isShow = false; //弹层的显示
                    }
                }
            },
            edit(v) { //点击编辑  弹层显示  内容在弹层框里
                this.isShow = true; //弹层的显示
               //用解构
                var {text,user,id} = v; 
                this.editData = {
                    text:text,
                    user:user,
                    id:id,
                }; 
            },
            //排序 
            sort(num) {
                switch (num) {
                    case 1:
                        this.list.sort((x, y) => {
                            return y.times - x.times
                        })
                        break;
                    case 2:
                        this.list.sort((x, y) => {
                            return x.times - y.times
                        })
                        break;
                }
            },
        }
    })
</script>

增加 —>不用解构的写法：

if (!this.obj.text || !this.obj.user) return;
                var _id = Math.max(...this.list.map(item => item.id)) + 1;
                this.list.unshift({
                    text: this.obj.text,
                    user: this.obj.user,
                    id: _id,
                    time: new Date().toLocaleString().replace(/\//g, '-'),
                    times: new Date().getTime()
                })
                this.obj = {} //清空输入框的数据  

编辑 —>不用解构的写法：

  this.editData = {
                    text: v.text,
                    user: v.user,
                    time: new Date().toLocaleString().replace(/\//g, '-'),
                    times: new Date().getTime(),
                    id: v.id,
                };

划重点 重点来了！！！

…扩展运算符
Math.max() 传值只能为数值
如果我们得到的是数组，又想取到最大值，如下：

var list = [
    { id: 8, t: "一" },
    { id: 2, t: "二" },
    { id: 5, t: "三" }
]
var a = list.map(function(item){
    return item.id;
})
console.log(a); //  [ 8, 2, 5 ]

我们得到的a是一个数组，想放在Math.max()中去求，就需要用到…
我们继续打印 …a 可以得到数值类型的 8,2,5

var list = [
    { id: 8, t: "一" },
    { id: 2, t: "二" },
    { id: 5, t: "三" }
]
var a= list.map(function(item){
    return item.id;
})
console.log(a); //  [ 8, 2, 5 ]

console.log(...a); // 8，2，5

把…a 放在Math.max()里面求最大值 ，便可得到

var list = [
    { id: 8, t: "一" },
    { id: 2, t: "二" },
    { id: 5, t: "三" }
]
var a= list.map(function(item){
    return item.id;
})
console.log(a); //  [ 8, 2, 5 ]

var b =Math.max(...a);
console.log(b); // 8 

可以简写为

var list = [
    { id: 8, t: "一" },
    { id: 2, t: "二" },
    { id: 5, t: "三" }
]

var b =Math.max(...list.map( item=>item.id));
console.log(b); // 8 

运行结果是一样的

…合并数组

var arr1 = ['a', 'b'];  
var arr2 = ['c'];  
var arr3 = ['d', 'e'];  
// ES5 的合并数组  
arr1.concat(arr2, arr3);  
// [ 'a', 'b', 'c', 'd', 'e' ]  
// ES6 的合并数组  
[...arr1, ...arr2, ...arr3]  
// [ 'a', 'b', 'c', 'd', 'e' ]