<html>
<head>
<title>vue bangding</title>
<style type="text/css">
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="warning">
<p>es6 解构赋值</p>
<button @click="submit">提交</button>
</div>
<script>
//---------------------es6用法集合-------------------
// 1.解构赋值，让代码更简洁
// 2. 提供了一些新数组方法（filter(),map(),forEach()，some())
//4. 箭头函数---this指向问题详解
var vm = new Vue({
el: '#warning',
data:{
name:"sally",
age:'18',
sex:'女',
oldItems:[1,2,3,10,8,5,15,20]
},
methods:{
submit(){
//------------不使用解构赋值---------------
// const name = this.name;
// const age = this.age;
// const sex = this.sex;
// console.log(name,age,sex,'不使用解构赋值')
//------------使用解构赋值------------------
// const {name,sex} = this
// console.log(name,sex,'使用解构赋值，代码更加简洁')
},
oldFilterItems(){ //过滤数组
//---------不使用es6数组新方法-----------
// const newFilterItems = []
// for(const i = 0;i<this.oldItems.length;i++){
// if(this.oldItems[i]<10){
// newFilterItems.push(this.oldItems[i])
// }
// }
//console.log(newFilterItems)
//-------使用es6 filter新方法
// var newFilterItems = this.oldItems.filter((item) => item<10)
// console.log(newFilterItems)
},
oldMapItems(){ //map方法一一映射
//---------map方法一一映射,所有项做统一处理---------
// var a1 = ['a','b','c']
// var a2 = a1.map((item) =>{
// return item.toUpperCase()
// })
// console.log(a2) //logs A,B,C
},
someCheck(value){ //some方法
//-----------some方法校验数组中是否含有number,有一个number即返回True,否则false---------
// return typeof value == 'number'
}
},
created(){
this.oldMapItems() //map方法一一映射
//-----------------some方法------------------
var a1 = [1,2,3]
console.log(a1.some(this.someCheck)) //true
var a2 = [1,'2',3]
console.log(a2.some(this.someCheck)) //true
var a3 = ['1','2','3']
console.log(a3.some(this.someCheck)) //false
}
})
</script>
</body>
</html>
2113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
