2018-09-18 vue初学六(过滤器:filter(fil

1.1过滤器

过滤器分为两种:
1、全局过滤器:filter
2、局部过滤器:filters

<div class="itany">
        <p>{{msg|math}}</p>
</div>
<script>
        Vue.filter("math",function(msg){ //这里的msg也可以写成data把数据msg当成形参传进来
            return msg.toFixed(1)
        })
        new Vue({
            el:".itany",
            data:{
                msg:Math.random()*(32-0+1)+0  //浮点数的计算公式
            }
        })
</script>

1.2过滤器 (当前时间)

<div class="itany">
        <p>{{msg|date}}</p>
</div>
<script>
        new Vue({
            el:".itany",
            data:{
                msg:new Date()
            },
            filters:{
                date:function(msg){
                    return msg.getFullYear()+"年"+(msg.getMonth()+1)+"月"+msg.getDate()+"日"+"星期"+msg.getDay()+","+msg.getHours()+"点"+msg.getMinutes()+"分钟"+msg.getSeconds()+"秒";      
                }
            }
        })
</script>

效果

QQ截图20180918193129.png

2.1计算属性

computed:{ }在这里面写计算的代码
用来处理复杂逻辑操作 后期更容易维护
但如果在html模板中放入太多的逻辑会让模板过重且难以维护

<div class="itany">
        <h2>{{msg}}</h2>
        <p>{{zero}}</p>    
</div>
<script>
        new Vue({
            el:".itany",
            data:{
                msg:"我 你"
            },
            computed:{
                zero:function(){
                    return this.msg.split(" ").reverse().join("爱")
         //先使用split将字符串进行切割变为数组,在使用reverse()进行翻转，最后使用join将其连接起来
                }
            }
        })
</script>

效果：

QQ截图20180918193601.png

2.1计算属性

<div id="itany">
        <button @click="fun">加货</button>
        <p>{{zero}}</p>
</div>
<script>
        new Vue({
            el:"#itany",
            data:{
                arr1:{price:3,count:2},
                arr2:{price:5,count:3},
            },
            methods:{
              fun:function(){
                  this.arr1.count++
                  //点击时使arr1的数量增加
              }  
            },
            computed:{
                zero:function(){
                    return this.arr1.price*this.arr1.count+this.arr2.price*this.arr2.count
                    // 在计算属性里进行运算
                }
            }
        })
</script>

效果：

QQ截图20180918194056.png