數(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>
屏幕展示:個(gè)位數(shù)0開頭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>
屏幕展示:保留兩位小數(shù)(四舍五入)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>
屏幕展示:刷新屏幕隨著時(shí)間變而變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>
屏幕顯示:點(diǎn)擊按鈕即加5.png