過濾器：讓要顯示在頁面上的內(nèi)容進(jìn)行重新篩選 分為倆部分js和html
過濾器可分為全局過濾器和局部過濾器
全局過濾器：
··js
vue filter("過濾器的名字"甩苛，function(){
})
··html:
{{msg|過濾器的名字}}
局部過濾器
``js
new Vue({
filters:{
過濾器名：function(){
}
}
})
例子：若代碼中為8瀏覽器中顯示為08;若代碼中為18瀏覽器中顯示18
<div class="box">
<p>{{9|add}}</p>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("add",function(data){
if(data<10){
return "0"+data
}else{
return data
}
})
new Vue({
el:".box"
})
</script>
<div class="box">
<p>{{9|add}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box"
filters:{
add:function(data){
if(data<10){
return "0"+data
}else{
return data
}
}
}
})
</script>
表盤：(倆種方法寫在一起)
<div class="box">
{{new Date()|number}}
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("number",function(data){
var year=data.getFullYear();
var month=data.getMonth()+1;
var ri=data.getDate();
var day=data.getDay();
var hours=data.getHours();
var minutes=data.getMinutes();
var seconds=data.getSeconds();
return data.innerHTML="現(xiàn)在時(shí)間是"+year+"年"+month+"月"+ri+"日,星期"+day+","+hours+"點(diǎn)"+minutes+"分"+seconds+"秒";
})
new Vue({
el:".box",
/*filters:{
number:function(data){
var year=data.getFullYear();
var month=data.getMonth()+1;
var ri=data.getDate();
var day=data.getDay();
var hours=data.getHours();
var minutes=data.getMinutes();
var seconds=data.getSeconds();
return data.innerHTML="現(xiàn)在時(shí)間是"+year+"年"+month+"月"+ri+"日，星期"+day+","+hours+"點(diǎn)"+minutes+"分"+seconds+"秒";
}
}*/
filters:{
number:function(data){
return data.getFullYear()+"年"+data.getMonth()+"月"+ri+"日,星期"+data.getDay()+","+data.getHours()+"點(diǎn)"+data.setMinutes()+"分"+data.getSeconds()+"秒"典徘；
}
}
})
</script>
數(shù)組API總結(jié)
push():向數(shù)組末尾添加一個(gè)或多個(gè)元素
unshift(): 向數(shù)組的開頭添加一個(gè)或多個(gè)元素
pop(): 刪除數(shù)組最后一個(gè)元素
shift(): 刪除數(shù)組第一個(gè)元素
sort(): 給數(shù)組排序
reverse(): 顛倒數(shù)組項(xiàng)在數(shù)組中的位置
concat(): 合并數(shù)組
slice(): 指定的位置開始刪除指定的數(shù)組項(xiàng)外邓，并且將刪除的數(shù)組項(xiàng)構(gòu)建成一個(gè)新數(shù)組;可以接受一個(gè)或兩個(gè)參數(shù)，要返回項(xiàng)的起始和結(jié)束位置，返回所截取數(shù)組的項(xiàng)宜肉，但是不包括結(jié)束位置的項(xiàng)匀钧，不會(huì)改變原數(shù)組
splice():主要用法是向數(shù)組的中部插入項(xiàng)，會(huì)改變原數(shù)組谬返，是最強(qiáng)大的數(shù)組方法之斯。最多指定3個(gè)參數(shù)。 對一個(gè)數(shù)組做刪除朱浴、插入和替換
indexOf(): 從前向后查找元素在數(shù)組中位置
lastIndexOf(): 從后向前查找元素在數(shù)組中位置
forEach()吊圾、every()、some()翰蠢、filter()和map()：數(shù)組迭代
(1)every():對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)项乒，如果數(shù)組的每一項(xiàng)都返回true，則返回true梁沧。對數(shù)組應(yīng)用該方法檀何，有返回值為true或false
(2)some():對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，如果數(shù)組的任一項(xiàng)都返回true廷支，則返回true频鉴。對數(shù)組應(yīng)用該方法，有返回值為true或false
(3)filter():對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)恋拍，返回該函數(shù)中會(huì)返回true的項(xiàng)組成的數(shù)組垛孔。有返回值，為符合條件的項(xiàng)組成的數(shù)組
(4)map()::對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù),有返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組施敢。
(5)forEach():對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù),這個(gè)方法沒有返回值周荐。本質(zhì)上與使用for循環(huán)迭代數(shù)組是一樣的
reduce(): 數(shù)組中的每個(gè)值（從左到右）開始合并，最終為一個(gè)值
reduceRight(): 數(shù)組中的每個(gè)值（從右到左）開始合并僵娃，最終為一個(gè)值
String():把對象的值轉(zhuǎn)換為字符串
join():把數(shù)組的所有元素放入一個(gè)字符串元素通過指定分隔符分隔
計(jì)算屬性
計(jì)算屬性關(guān)鍵詞: computed概作。
計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。
``html
<div class="box">
<p>{{msg.split(" ").reverse().join("===")}}</p>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello vue"
}
})
</script>
這樣寫頁面復(fù)雜不清晰占內(nèi)存 不便于后期的維護(hù)可改為：
<div class="box">
<p>{{msg}}</p>
<h5>{{add}}</h5>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello vue"
},
computed:{
add:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
利用計(jì)算屬性求和
<div class="box">
<button v-on:click="add">點(diǎn)擊</button>
<p>總價(jià)：{{push}}元</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
methods:{
add:function(){
this.package1.count++
}
},
computed:{
push:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
}
})
</script>
