06Vue.js过滤器与计算属性

作者: 个人不完美 | 来源:发表于2018-04-16 13:58 被阅读0次

06Vue.js过滤器与计算属性
过滤器、计算属性
过滤器和计算属性
vue.js 核心知识点五
vue入门基础（2）
vue - 学习笔记
2018-09-19 vue 5
VUE过滤器和计算属性
Vue-全集
Vue基础 | 二、Vue对象属性功能

过滤器使用方法

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档， http://cn.vuejs.org/api/#过滤器，过滤器通常会使用管道标志 “ | ”
Vue里面的过滤器主要有两种：第一是定义在全局就能在所有的实例中调用过滤器，第二是定义在了实例里就在实例里调用过滤器。

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

详细的写法如下代码段所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue过滤器的使用</title>
    <script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 过滤器用法: | 过滤器名称 -->
        <!-- <div>{{3.1415926 | number(2)}}</div> -->
        <div>{{11 | addZero}}</div>
        <button @click="click1">{{flag}}</button>
    </div>
    <script type="text/javascript">
        //这里是全局过滤器(Vue.filter)的写法
        Vue.filter('addZero',function(data){
            return data<10?'0'+data:data;
        });
        var app = new Vue({
            el: "#app",
            data: {
                flag:true
            },
            methods: {
                click1:function(){
                    this.flag=!this.flag
                }
            },
            filters: {
                //这里是vue的局部过滤器
                number:function(data,n){
                    //return data.toFixed(2);//保留两位小数
                    return data.toFixed(n);//传参写法(n表示用户传入的数值)
                }
            }
        })
    </script>
</body>
</html>

计算属性使用方法

计算属性：computed 主要是用于用来存储和处理数据。

详细的写法如下代码段所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE的计算属性</title>
    <script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 反转字符串 将计算属性放在HTML模板里面看上去比较复杂，也不容易看懂理解 -->
        <!-- <p>{{msg.split('').reverse().join('')}}</p> -->
        <!-- 计算属性调用 -->
        <p>{{reverseMsg}}</p> 
        <p>{{num2}}</p> 
        <!-- 计算属性的值变更 通过方法触发事件改变  -->
        <!--<button @click="change">change</button>-->
        <!--通过计算属性的值获取  -->
        <button @click="getNum2()">getNum2</button>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                msg:'hello Vue!',
                num1:100,
                // num2:110
            },
            methods: {
                change:function(){
                    this.num2=111;
                },
                getNum2(){
                    console.log(this.num2);
                }
            },
            computed: {
                //这里是计算属性主要是用来存储和处理数据
                reverseMsg:function(){
                    //字符串反转
                    return this.msg.split('').reverse().join('');
                },
                num2:{
                    get:function(){
                        return this.num1-1;
                    },
                    set:function(val){
                        //this.num2=val;这种写法是错误的 不能直接修改计算属性
                        this.num1=val;
                    }
                }
            }
        })
    </script>
</body>
</html>