过滤器和计算属性
2018-09-17 本文已影响0人
张鑫冲
过滤器：让要显示在页面上的内容进行重新筛选
全局过滤器：
new Vue({
el:''
data:{}
methods:{},
filters:{
过滤器名：function（data）{
}
})
局部过滤：
Vue.filter('过滤器的名字'，function(){
})
new Vue({
el:''
data:{}
methods:{}
})
过滤器日期：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<p>{{new Date|add}}</p>
</div>
</body>
<script>
Vue.filter('add', function(data) {
return data.getFullYear(0) + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日，星期' + data.getDay() + ',' + data.getHours() + '小时' + data.getMinutes() + '分钟' + data.getSeconds() + '秒'
})
new Vue({
el: '#box',
})
</script>
</html>
计算属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<p>{{add}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
mas:'hello vue'
},
computed:{ //计算属性
add:function(){
return this.mas.split(' ').reverse().join('====') //mas.split（）切割，reverse()翻转，join（）拼接
}
}
})
</script>
</body>
</html>
计算属性 求和：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<button></button>
<p></p>
</div>
<script>
new Vue({
el:'#box',
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
}
}
})
</script>
</body>
</html>
