ES6和ES7语法中的...的作用

最新推荐文章于 2022-05-03 07:30:00 发布

qq_35383788

最新推荐文章于 2022-05-03 07:30:00 发布

阅读量210

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/qq_35383788/article/details/110947157

版权

参考:https://blog.csdn.net/a715167986/article/details/90438813

同时参考:https://es6.ruanyifeng.com/?search=%E5%B1%95%E5%BC%80%E8%BF%90%E7%AE%97%E7%AC%A6&x=0&y=0#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6

我尝试着做如下案例:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="../js/vue.js"></script>
   </head>
   <body>
       <div id="app">
           <input type="text">
           <button @click="add">点击</button>
       </div>
   </body>
   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               queryFrom: {
                   //ID
                   id: null,
                   //品种
                   kind: null,
                   //名字
                   name: null,
                   //颜色
                   color: null,
                   createTimeRange: ["", ""],
                   updateTimeRange: ["", ""],
                   pageNum: 1,
                   orders: []
               }
           },
           methods:{
               add:function(){
                   console.log(...this.queryFrom);
               // return {...this.queryFrom,
                   // createTimeBegin:"12",
                   // createTimeEnd:"23",
                   // updateTimeBegin:"34",
                   // updateTimeEnd:"45"
                               //        }
               },
               query:function(){
                   var json1 = {};
                   json1 = this.add();
                   console.log(json1)
               }
           }
       });
   </script>
</html>

然后做如下修改:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="../js/vue.js"></script>
   </head>
   <body>
       <div id="app">
           <input type="text">
           <button @click="query">点击</button>
       </div>
   </body>
   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               queryFrom: {
                   //ID
                   id: null,
                   //品种
                   kind: null,
                   //名字
                   name: null,
                   //颜色
                   color: null,
                   createTimeRange: ["", ""],
                   updateTimeRange: ["", ""],
                   pageNum: 1,
                   orders: []
               }
           },
           methods:{
               add:function(){
               return {...this.queryFrom,
                   createTimeBegin:"12",
                   createTimeEnd:"23",
                   updateTimeBegin:"34",
                   updateTimeEnd:"45"
                                       }
               },
               query:function(){
                   var json1 = {};
                   json1 = this.add();
                   console.log(json1)
               }
           }
       });
   </script>
</html>

打印结果如下:

可以看到结果:                   createTimeBegin:"12",
                   createTimeEnd:"23",
                   updateTimeBegin:"34",
                   updateTimeEnd:"45"

替换了queryFrom的结果中的变量值