vue笔记-ES6的不同写法
2020-12-30 本文已影响0人
Hush____
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 += parseInt(user.age);
}
return res;
//find/findIndex
}
}
})
</script>
</body>
</html>
3、浏览器参数行为参数
1、不传但是用参数接收浏览器行为
@click="xxx"
xxx(event){}
2、多个参数($event)
@click="xxx(abc, $event)"
xxx(param1, event){}
4、模版拼接
`<div>${param}</div>`
