- 过滤器：对页面上的数据进行筛选和过滤
全局过滤器
局部过滤器html <p>{{num|过滤器的名字}}</p> js Vue.filter('过滤器的名字',function(){})
html
<p>{{num|过滤器的名字}}</p>
js
new Vue({
el:'#itany',
filters:{
过滤器的名字：function(){}
}
})
js输出当前时间
<script>
var date=new Date();
//年份
var year=date.getFullYear();
//月
var mon=date.getMonth()+1;
//日
var ri=date.getDate();
//星期
var week=date.getDay();
//时
var hour=date.getHours();
//分
var min=date.getMinutes();
//秒
var sec=date.getSeconds();
document.write(`今天是${year}年,${mon}月,${ri}日，星期${week}，${hour}点，${min}分，${sec}秒`)
</script>
全局过滤器与局部过滤器的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{num|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:"#app",
data:{
num:Math.floor(Math.random()*(20-0+1)+0)
}/*,
局部过滤器
filters:{
addZero:function(data){
if(data<10){
return "0"+data;
}else{
return data
}
}
}*/
})
</script>
</html>
输出结果为两位随机数
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<p>{{123.456|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('number',function(data){
return data.toFixed(2)
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
取到小数点后两位
toFixed（n）;
有四舍五入的作用，n表示第几位的数值
利用过滤器输出当前时间
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{new Date()|date}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('date',function(date){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+"日,星期"+date.getDay()+date.getHours()+'点'+date.getMinutes()+'分'+date.getSeconds()+'秒'
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
输出结果为：2018年9月18日,星期219时37分3秒
计算属性
运用计算属性处理复杂的逻辑 （模板轻便且好维护）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<a href="">{{revMsg}}</a>
<h1>{{msg.split(' ').reverse().join('*****')}}</h1>
<!--vue===hello-->
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
methods:{},
filters:{},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('-----')
}
}
})
</script>
</body>
</html>
QQ拼音截图未命名.png
点击加货
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
pack1:{price:5,count:3},
pack2:{price:4,count:6}
},
computed:{
total:function(){
return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
}
},
methods:{
add:function(){
this.pack1.count++;
}
}
})
</script>
</body>
</html>
QQ拼音截图未命名.png
3.数组API
- String() // toString()把数组转换为字符串，并返回结果。
注意： 数组中的元素之间用逗号分隔。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
输出为：
Banana,Orange,Apple,Mango
2.join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
energy输出结果：
Banana,Orange,Apple,Mango
3.concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
children 输出结果：
Cecilie,Lone,Emil,Tobias,Linus,Robin
4.slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，原始数组不会被修改。
注意： slice() 方法不会改变原始数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon
5.splice() 方法用于插入、删除或替换数组的元素。
注意：这种方法会改变原始数组！。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango
6.reverse() 方法用于颠倒数组中元素的顺序。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
fruits 结果输出：
Mango,Apple,Orange,Banana
7.push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。
注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
fruits 结果输出：
Banana,Orange,Apple,Mango,Kiwi
8.pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用 shift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits 结果输出：
Banana,Orange,Apple
9.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用 push() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango
10.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意： 此方法改变数组的长度！
提示: 移除数组末尾的元素可以使用 pop() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
fruits结果输出:Orange,Apple,Mango
