一.过滤器：让要显示在页面上的内容进行重新筛选。
二.分为：
（1） 全局过滤器
<!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='js/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>
(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='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
</html>
三.实例
日期
<!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='js/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>
四.计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<p>{{msg.split(" ").reverse().join("+++")}}</p>
<h1>{{count}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
msg:"h e l l o v u e"
},
computed:{
count:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
</body>
</html>
五.计算属性求和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<button v-on:click="add">加货</button>
<h2>总价为{{aa}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
pag:{price:2,count:3},
pag1:{price:3,count:5},
},
computed:{
aa:function(){
return this.pag.price*this.pag.count+this.pag1.price*this.pag1.count
}
},
methods:{
add:function(){
return this.pag1.count++;
}
}
})
</script>
</body>
</html>
六.数组API
1.String() :对象用于处理文本（字符串）。
new String(s);
String(s);
2.push();将值添加到数组的尾部；
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
4
George,John,Thomas,James
3.unshift();将值添加数组的头部;
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
4
William,George,John,Thomas
4.pop()；删除数组的最后一个元素，并且返回删除元素;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits 结果输出：
Banana,Orange,Apple
5.splice();从一个数组当中删除一个或多个元素，返回所移除的元素；
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
6.slice(): 方法可从已有的数组中返回选定的元素.
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
John,Thomas
George,John,Thomas
7.shift():方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
George
John,Thomas
8.join(“分隔符”);将数组转换为字符串，字符串按照分隔符分割，返回分割好的字符串
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
输出：
George,John,Thomas
9.reverse();反转数组，返回翻转后的数组；
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
</script>
输出：
George,John,Thomas
Thomas,John,George
10.concat():基于当前数组，创建一个新的数组，并返回这个新数组，不会改变原数组；
var color = ["red","green","blue"];
var colors2 = color.concat("yellow",["black","brown"]);
网友评论