2018-09-17

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