今天学习了过滤器和计算属性
过滤器
过滤器是让要显示在页面上的内容进行重新筛选。
过滤器分两种
1.全局过滤器
2.局部过滤器
全局过滤器
<body>
<div id="itany">
<p>{{8|addZero}}</p>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
局部过滤器
<body>
<div id="demo">
<p>{{1.564564|add}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
filters:{
add:function(ind){
return ind.toFixed(2)
}
}
})
</script>
</body>
过滤器获取时间
<body>
<div id="demo">
<p>{{new Date()|add}}</p>
</div>
<script src='../js/vue.js'></script>
<script>
new Vue({
el:'#demo',
filters:{
add:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
</body>
计算属性
<body>
<div id="demo">
<p>{{add}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
mag:'hellwo vue'
},
computed:{
add:function(){
return this.mag.split(' ').reverse().join('~~~~')
}
}
})
</script>
</body>
计算总价
<body>
<div id="demo">
<button @click='abb'>点击</button>
<p>{{add}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
add:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
abb:function(){
this.package2.price++;
}
}
})
</script>
</body>
数组常用API
添加
push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。
unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。
删除
pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
操作
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，原始数组不会被修改。
splice()方法始终会返回一个数组，该数组包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组），用途最广，有如下3种
1.删除：需指定2个参数，要删除的第一项位置和要删除的项数
2.插入：需提供3个参数，起始位置、0（要删除的项数）和要插入的项，如要插入多个项 ，再传入第四，五...
3.替换：需指定3个参数，起始位置、要删除的项数和要插入的任意数量的项
位置方法
indexOf()方法从数组的开头（位置0）开始向后查找，
lastIndexOf()方法从数组的末尾开始向前查找，
这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引，没找到返回-1
重排序方法
sort()方法按升序排列数组项--即最小的值位于最前面，最大的值排在后面。
reverse()降序排列；
迭代方法
forEach()，对数组的每一项运行给定函数,这个方法没有返回值。本质上与使用for循环迭代数组是一样的
map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
转换方法
toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
valueOf()返回的还是数组
toLocaleString()方法也会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
网友评论