數(shù)組API
①：string()：將數(shù)組轉(zhuǎn)化為字符串并分隔每個(gè)元素齿诉；
var arr=[1,2,3];
String(arr)
"1,2,3"
arr//[1, 2, 3]
注：不改變?cè)瓟?shù)組
②：join()：將數(shù)組中的所有元素連接成一個(gè)字符串竣蹦；
var arr=[1,2,3];
arr.join('')//"123"
var arr=[1,2,3];
arr.join(' ')//"1 2 3"
var arr=[1,2,3];
arr.join(',')//"1,2,3"
arr//[1, 2, 3]
強(qiáng)調(diào)：如果join省略"",就等效于String
注：不改變?cè)瓟?shù)組
③：contact()：將傳入的數(shù)組或者元素與原數(shù)組合并顶猜，組成一個(gè)新的數(shù)組并返回；
var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(1,2)//[1, 2, 3, 1, 2]
var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(arr2)//[1, 2, 3, 4, 5, 6]
強(qiáng)調(diào)：concat的參數(shù)中包含數(shù)組痘括，則打散數(shù)組长窄，以單個(gè)元素拼接
④：slice()：連接兩個(gè)或多個(gè)數(shù)組；
var arr=[1,2,3,4]
arr.slice(0)//[1, 2, 3, 4]
arr.slice(0,2)//[1, 2]
arr.slice(-3)//[2, 3, 4]
arr.slice(-3,-1)//[2, 3]
arr.slice(0,2)//[1, 2]
arr//[1, 2, 3, 4]
獲取子數(shù)組：var subArr=arr.slice(starti,endi+1);
獲得arr中starti位置開始远寸，到endi位置的所有元素組成的新數(shù)組
強(qiáng)調(diào)：含頭不含尾
省略第二個(gè)參數(shù)：表示從starti一直取到結(jié)尾
可支持負(fù)數(shù)參數(shù)：-n表示倒數(shù)第n個(gè)元素抄淑，相當(dāng)于length-n
⑤：splice()：從數(shù)組中添加/刪除一些元素屠凶，然后返回被刪除的元素驰后；
var arr=[1,2,3,4]
arr.splice(0)//[1, 2, 3, 4]
var arr=[1,2,3,4]
arr.splice(-1)//[4]
var arr=[1,2,3,4]
arr.splice(0,3)//[1, 2, 3]
arr//[4]
刪除，插入矗愧，替換：（直接修改原數(shù)組）
1灶芝、刪除：var deletes=arr.splice(starti,n);
刪除arr中starti位置開始的n個(gè)元素
返回被刪除的元素組成的臨時(shí)新數(shù)組
⑥：reverse()：顛倒數(shù)組中元素的順序；
arr=[1,2,3,4]
arr.reverse()//[4, 3, 2, 1]
arr//[4, 3, 2, 1]
反轉(zhuǎn)數(shù)組元素：arr.reverse();
⑦：push()：添加一個(gè)或者多個(gè)元素到數(shù)組末尾唉韭，并且返回?cái)?shù)組新的長(zhǎng)度夜涕；
var arr=[1,2,3,4]
arr2=arr.push(1)//5
//返回新數(shù)組的長(zhǎng)度
arr//[1, 2, 3, 4, 1]
結(jié)尾出入棧：
1、入棧：arr.push(值)
將值壓入數(shù)組結(jié)尾
⑧：pop()：刪除一個(gè)數(shù)組中的最后一個(gè)元素属愤，并且返回這個(gè)元素女器；
var arr=[1,2,3,4]
arr.pop()//4
//返回彈出的元素
arr//[1,2,3]
出棧：var last=arr.pop();
彈出數(shù)組最后一個(gè)元素
⑨：unshift()：在數(shù)組開始出插入一些元素，并返回?cái)?shù)組新的長(zhǎng)度住诸；
var arr=[1,2,3,4]
arr.unshift(22)//5
arr//[22, 1, 2, 3, 4]
開頭出入棧：
1驾胆、入棧：arr.unshift(值);
將值插入數(shù)組開頭
⑩：shift()：刪除數(shù)組的第一個(gè)元素，并返回這個(gè)元素贱呐；
var arr=[1,2,3,4]
arr.shift()//1
arr//[2, 3, 4]
出棧：var first=arr.shift();
取出數(shù)組第一個(gè)元素
2018.9.17過濾器丧诺；計(jì)算屬性
全局過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{2|addZero}}</p>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
1.png
局部過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
{{6|num}}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
filters:{
num:function(c){
if(c<10){
return '0'+c
}else{
return c
}
}
}
})
</script>
</body>
</html>
屏幕展示：個(gè)位數(shù)0開頭
保留兩位小數(shù)（toFixed（2））
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{123.41233|number}}</p>
</div>
<script src='vue.js'></script>
<script>
// Vue.filter("number",function(data){
// return data.toFixed(2)
// }) //全局過濾器
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})//部分過濾器
</script>
</body>
</html>
2.png
日期計(jì)時(shí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{new Date()|date}}</p>
</div>
<script src='vue.js'></script>
<script>
Vue.filter("date",function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+
'日,星期'+data.getDay()+','+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
3.png
計(jì)算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{count}}</a>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{//計(jì)算屬性
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
</body>
</html>
4.png
計(jì)算屬性 求和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加貨</button>
<h1>{{total}}</h1>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
total:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
5.png
