美文网首页
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()

相关文章

  • 过滤器、计算属性

    全局过滤器 局部过滤器 计算属性

  • 过滤器和计算属性

    过滤器:让要显示在页面上的内容进行重新筛选 全局过滤器: 局部过滤: 过滤器日期: 计算属性: 计算属性 求和:

  • vue入门基础(2)

    1.vue中的过滤器 定义:让要显示在页面上的内容进行重新筛选 全局过滤器: 局部过滤器: 2.计算属性 计算属性...

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

    1过滤器分为两种 一.局部过滤二.全局过滤例如:局部过滤 2.全局过滤 3..计算属性 :对于任何复杂逻辑,你都应...

  • 2018-09-19 vue 5

    一、过滤器过滤器:对页面上的数据进行筛选和过滤 二、计算属性

  • VUE过滤器和计算属性

    过滤器主要分为全局过滤器和局部过滤器。 全局过滤器如下: 局部过滤器如下: 计算属性如下: 过滤器中获取日期: 计...

  • vue.js 核心知识点五

    目录 - 5.1 常用自定义过滤器定义与使用 - 5.2 vue的计算属性 - 5.3 计算属性的缓存和方法调用...

  • 2018-09-17 数组API;过滤器;计算属性

    数组API ①:string():将数组转化为字符串并分隔每个元素; 注:不改变原数组 ②:join():将数组中...

  • Vue-全集

    入门 事件 条件 属性绑定 双向绑定 属性计算 过滤器 组件 路由 Axios.js Vue-cli

  • Vue基础 | 二、Vue对象属性功能

    一、Vue的三种属性 1.1 过滤器 1.2 计算属性 1.3 监听属性 1.4 监听属性案例(各地区联动) 二、...

网友评论

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

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