数组API
①：string()：将数组转化为字符串并分隔每个元素；
var arr=[1,2,3];
String(arr)
"1,2,3"
arr//[1, 2, 3]
注：不改变原数组
②：join()：将数组中的所有元素连接成一个字符串；
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]
强调：如果join省略"",就等效于String
注：不改变原数组
③：contact()：将传入的数组或者元素与原数组合并，组成一个新的数组并返回；
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]
强调：concat的参数中包含数组，则打散数组，以单个元素拼接
④：slice()：连接两个或多个数组；
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]
获取子数组：var subArr=arr.slice(starti,endi+1);
获得arr中starti位置开始，到endi位置的所有元素组成的新数组
强调：含头不含尾
省略第二个参数：表示从starti一直取到结尾
可支持负数参数：-n表示倒数第n个元素，相当于length-n
⑤：splice()：从数组中添加/删除一些元素，然后返回被删除的元素；
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]
删除，插入，替换：（直接修改原数组）
1、删除：var deletes=arr.splice(starti,n);
删除arr中starti位置开始的n个元素
返回被删除的元素组成的临时新数组
⑥：reverse()：颠倒数组中元素的顺序；
arr=[1,2,3,4]
arr.reverse()//[4, 3, 2, 1]
arr//[4, 3, 2, 1]
反转数组元素：arr.reverse();
⑦：push()：添加一个或者多个元素到数组末尾，并且返回数组新的长度；
var arr=[1,2,3,4]
arr2=arr.push(1)//5
//返回新数组的长度
arr//[1, 2, 3, 4, 1]
结尾出入栈：
1、入栈：arr.push(值)
将值压入数组结尾
⑧：pop()：删除一个数组中的最后一个元素，并且返回这个元素；
var arr=[1,2,3,4]
arr.pop()//4
//返回弹出的元素
arr//[1,2,3]
出栈：var last=arr.pop();
弹出数组最后一个元素
⑨：unshift()：在数组开始出插入一些元素，并返回数组新的长度；
var arr=[1,2,3,4]
arr.unshift(22)//5
arr//[22, 1, 2, 3, 4]
开头出入栈：
1、入栈：arr.unshift(值);
将值插入数组开头
⑩：shift()：删除数组的第一个元素，并返回这个元素；
var arr=[1,2,3,4]
arr.shift()//1
arr//[2, 3, 4]
出栈：var first=arr.shift();
取出数组第一个元素
2018.9.17过滤器；计算属性
全局过滤器
<!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>
屏幕展示：个位数0开头
保留两位小数（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
日期计时
<!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()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
3.png
计算属性
<!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:{//计算属性
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
</body>
</html>
4.png
计算属性 求和
<!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
