美文网首页
2018-09-17过滤器计算属性

2018-09-17过滤器计算属性

作者: Rascar | 来源:发表于2018-09-17 17:45 被阅读0次

    1过滤器分为两种

    一.局部过滤
    二.全局过滤
    例如:局部过滤

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="js/vue.js"></script>
        </head>
        <body>
            <div id="box">
                {{2|nanea}}
            </div>
            <script>
                Vue.filter("nanea",function(z){
                    if(z<10){
                        return "0"+z;
                    }else{
                        return z;
                    }
                })
            </script>
        </body>
    </html>
    

    2.全局过滤

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="js/vue.js"></script>
        </head>
        <body>
            <div id="box">
                {{122.21221456|aa}}
            </div>
            <script>
    
            new Vue({
                el:"#box",
                filters:{
                    aa:function(ddd){
                        return ddd.toFixed(2)
                    }
                }
            })
            </script>
        </body>
    </html>
    

    3..计算属性 :对于任何复杂逻辑,你都应当使用计算属性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src='../diyitain/js/vue.js'></script>
    </head>
    <body>
       <div class="box">
           <button v-on:click='btn'>点击</button>
           <h1>{{app}}</h1>
       </div>
        <script>
            new Vue({
                el:'.box',
                data:{
                    mag1:{price:2,count:3},
                    mag2:{price:3,count:4}
                },
                computed:{
                    app:function(){
                        return this.mag1.price*this.mag1.count+this.mag2.price*this.mag2.countoo
                    }
                },
                methods:{
                    btn:function(){
                        this.mag2.price++
                    }
                }
            })
        </script>
    </body>
    </html>
    

    4.总结数组API

    String();    数组转字符串       将数组中的元素用逗号连接成字符串   String(arr)或arr.toString()
      join();      连接              用连接符把数组里面的元素连接成字符串 arr.join
      concat();    拼接              不会修改原数组               arr.concat("a","b",arr1)
      slice();     截取              不会修改原数组                     arr.slice(start[,end])   
      splice();    删除、插入、替换   直接修改原数组      arr.splice(start,n[,value1,value2...])
      reverse();   翻转数组          直接修改原数组      arr.reverse()
      push();      结尾入栈          在数组末尾追加元素         arr.push(value1[,value2,arr1])
      pop();       结尾出栈          弹出数组最末尾的元素       arr.pop()
      unshift();   开头入栈          在数组的最开头插入元素          arr.unshift(value)  
      shift();     开头出栈          弹出数组最开头的元素。          arr.shift()
    

    相关文章

      网友评论

          本文标题:2018-09-17过滤器计算属性

          本文链接:https://www.haomeiwen.com/subject/uoprnftx.html