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

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()
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,947评论 18 139
  • 过滤器:让要显示在页面上的内容进行重新筛选 分为俩部分js和html 过滤器可分为全局过滤器和局部过滤器 全局...
    少女的愫语阅读 385评论 0 2
  • 数组API ①:string():将数组转化为字符串并分隔每个元素; 注:不改变原数组 ②:join():将数组中...
    酒窝仙女阅读 340评论 0 3
  • 青春,多麽美丽梦幻的一个词语,它如人生一样,都是幸福的,可又充满挑战和艰辛…… 青春如人生一样,道路漫长,不...
    孤筱兮阅读 281评论 0 0
  • 文|仙仙 你说 昨夜你多喝了几杯酒 昏暗发黄的灯光 把你的影子静静地投在长廊里 垃圾篓旁凌乱散落的纸团 是你扔下的...
    湘西阿妹阅读 606评论 11 15