1,过滤器
过滤器：让要显示在页面上的内容进行重新筛选
过滤器分为：全局过滤器和局部过滤器，两种，且两种写法不同
局部过滤器：在Javascript内部写,然后在需要使用过滤器的地方写
‘|’
<html>
<p>{{msg|过滤器的名字}}</p>
new Vue({
})
格式：
js
html
js:
Vue.filter('过滤器的名字'，function(){
})
全局过滤器：
new Vue({
el:''
data:{}
methods:{},
filters:{
过滤器名：function（data）{
}
})
使用过滤器让个位数前加0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{2|addZero}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
使用过滤器保留自然数小数点后两位：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{123.41233|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
// Vue.filter("number",function(data){
// return data.toFixed(2)
// })
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
</html>
使用过滤器获取当前日期
格式为2018年9月18日,星期2,14点18分44秒
<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()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
2，Vue.js 计算属性
计算属性关键词: computed。
练习；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{count}}</a>
</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>
加货练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
total:function(){
return
this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
