vue.js 全局過(guò)濾器 局部過(guò)濾器 計(jì)算屬性
1.過(guò)濾器 ： 讓要顯示在頁(yè)面上的內(nèi)容進(jìn)行重新篩選
全局過(guò)濾器
<!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()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
局部過(guò)濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box"> {{1.1234567890|add}} </div>
<!--
<script>
Vue.filter('add',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'.box'
})
</script>
-->
<!--
<script>
new Vue({
el: '.box',
filters:{
add:function(data){
if(data>10){
return'0'+data;
}else{
return data+'0'
}
}
}
})
</script>
-->
<script>
new Vue({
el: '.box',
filters: {
add: function (data) {
return data.toFixed(5);
}
}
})
</script>
</body>
</html>
2.計(jì)算屬性 ：對(duì)于任何復(fù)雜邏輯支救，你都應(yīng)當(dāng)使用計(jì)算屬性掌挚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src='../diyitain/js/vue.js'></script>
</head>
<body>
<div class="box">
<button v-on:click='btn'>點(diǎn)擊</button>
<h1>{{app}}</h1>
</div>
<script>
new Vue({
el:'.box',
data:{
mag1:{price:2,count:3},
mag2:{price:3,count:4}
},
computed:{
app:function(){
return this.mag1.price*this.mag1.count+this.mag2.price*this.mag2.countoo
}
},
methods:{
btn:function(){
this.mag2.price++
}
}
})
</script>
</body>
</html>
3. 數(shù)組API:
String(); 數(shù)組轉(zhuǎn)字符串 將數(shù)組中的元素用逗號(hào)連接成字符串 String(arr)或arr.toString()
join(); 連接 用連接符把數(shù)組里面的元素連接成字符串 arr.join
concat(); 拼接 不會(huì)修改原數(shù)組 arr.concat("a","b",arr1)
slice(); 截取 不會(huì)修改原數(shù)組 arr.slice(start[,end])
splice(); 刪除崇裁、插入曙求、替換 直接修改原數(shù)組 arr.splice(start,n[,value1,value2...])
reverse(); 翻轉(zhuǎn)數(shù)組 直接修改原數(shù)組 arr.reverse()
push(); 結(jié)尾入棧 在數(shù)組末尾追加元素 arr.push(value1[,value2,arr1])
pop(); 結(jié)尾出棧 彈出數(shù)組最末尾的元素 arr.pop()
unshift(); 開(kāi)頭入棧 在數(shù)組的最開(kāi)頭插入元素 arr.unshift(value)
shift(); 開(kāi)頭出棧 彈出數(shù)組最開(kāi)頭的元素与帆。 arr.shift()
