1.vue 过滤器的用法
<div id="app">
<p>{{48|hero}}</p>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.filter('hero',function(data){
if(data<10){
return '0'+data;
}else{
return data
}
});
new Vue({
el:'#app'
})
</script>
生成的效果
48
2.vue 用过滤器实现时间
<div id="app">
{{new Date()|date}}
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#app',
filters:{
date:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
生成的效果
2018年9月17日,星期1,15点29分37秒
3.vue的计算属性实现反转
<div id="app">
<h1>{{count}}</h1>
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
computed:{
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
生成的效果
vue===hello
vue计算机属性实现加
<div id="app">
<button v-on:click="r">加</button>
<p>{{ki}}</p>
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name1:{price:2,count:3},
name2:{price:2,count:3},
},
computed:{
ki:function() {
return this.name1.price*this.name1.count+this.name2.price*this.name2.count
}
},
methods:{
r:function(){
this.name1.count++
}
}
})
</script>
生成的效果点击加数字会变动
无标题.png
