过滤器和计算属性
2018-09-17 本文已影响0人
大宝贝_4c6e
1、过滤器
过滤器指让要显示在页面上的内容进行重新筛选。
过滤器分为两种：全局过滤器、局部过滤器。
2、全局过滤器
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<p>{{12|zore}}</p>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("zore",function(data){
if(data<10){
return "0"+data;
}else{
return data;
}
})
new Vue({
el:"#itany"
})
</script>
</body>
</html>
3、局部过滤器
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="itany">
<p>{{321.652|zero}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
filters:{
zero:function(data){
return data.toFixed(2);
}
}
})
</script>
</body>
</html>
4、练习
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="itany">
<p>{{new Date()|time}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#itany",
filters: {
time:function(data){
return data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日,星期' + data.getDay() + ',' + data.getHours() + '点' + data.getMinutes() + '分' + data.getSeconds() + '秒';
}
}
})
</script>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{new Date()|time}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter("time", function(data) {
return data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日,星期' + data.getDay() + ',' + data.getHours() + '点' + data.getMinutes() + '分' + data.getSeconds() + '秒';
})
new Vue({
el: '#itany'
})
</script>
</body>
</html>
5、计算属性
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<h1>{{count}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue"
},
computed:{
count:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="itany">
<h1>{{msg.split(" ").reverse().join("===")}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
