vue自学笔记-ES6的不同写法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42715209/article/details/111958568

这篇博客详细记录了Vue学习过程中的一个重点——ES6的创新写法，包括字面量的增强、函数的新型应用以及for遍历的新技巧，旨在帮助开发者更好地理解和运用ES6特性在Vue项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、字面量增强写法

1、对象属性
//  ES6之前
let name = 'liang';
let age = 18;
let obj1 = {
    name: name,
    age: age
}

//ES6 之后
let obj2 = {
    name,
    age
}

2、函数的增强写法

//  ES6之前
let obj1 = {
    test: function () {
      console.log('obg1的test函数')；
    }
}
obg1.test();

//ES6 之后
let obj2 = {
    test () {
      console.log('obg2的test函数')；
    }
}
obg2.test();

3、for遍历的增强写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            获取user1的年龄和：{{ageSum}}
        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    users: [0, 1, 2, 3, 4],
                    users1: [
                        {name:'小王', age: '20'},
                        {name:'小张', age: '21'},
                        {name:'小李', age: '22'}
                    ],
                    users2:{ name:'小王', age: '20', sex: '男' }
                },
                computed:{
                    ageSum(){
                        // 1、常规
                        // var res = 0;
                        // for(let i = 0; i < this.users1.length; i++){
                        //  res += parseInt(this.users1[i].age);
                        // }
                        // return res;


                        //2、in
                        // var res = 0;
                        // for(let i in this.users1){
                        //  res += parseInt(this.users1[i].age);
                        // }
                        // return res;

                        // es6 ===》  3、of 
                        // var res = 0;
                        // for(let user of this.users1){
                        //  res += user.age;
                        // }
                        // return res;

                        //find(undefined)/findIndex(-1)
                    }
                }

            })
        </script>
    </body>
</html>