一、计算属性

用法1

<p>{{ reverseMsg }}</p>

<script>
    new Vue({
        el: '#app',
        data: {
            // 普通属性
            msg: 'welcome to vue',
        },
        computed: {
            // 计算属性
            reverseMsg: function () {
                // 该函数必须有返回值,用来获取属性,称为get函数
                return this.msg.split(' ').reverse().join(' ');
            },
        },
    });
</script>

用法2

<p>{{ reverseMsg }}</p>

<script>
    new Vue({
        el:'#app',
        data:{ // 普通属性
           msg:'welcome to vue',
        },
        computed:{ // 计算属性
           reverseMsg:{
                get:function(){
                    return this.msg.split(' ').reverse().join(' ');
                },
                set:function(newValue){
                    this.msg = newValue; // 由于reverMsg基于msg,所以本质上是给msg赋值
                }
           }
        }
    });
</script>

二、过滤器

只能在v-bind和插值表达式中使用

局部过滤器

<p>{{ 8 | addZero }}</p>
<p :title="6 | addZero">hello</p>
<p>{{ 3.1415926 | round(1) }}</p>
<script>
    var vm = new Vue({
        el: '#app',
        // 定义局部过滤器
        filters: {
            // 为个位数补0
            addZero: function (target) {
                // 默认会自动将处理的目标数据作为参数传入
                return target < 10 ? '0' + target : target;
            },
            // 四舍五入,保留指定的小数位
            round(target,n){ // 可以接收多个参数
                return target.toFixed(n);
            }
        },
    });
</script>

全局过滤器

<p>{{ 3.1415926 | round(1) }}</p>

<script>
    // 定义全局过滤器
    Vue.filter('round',function(target,n){
        return target.toFixed(n);
    });

    var vm = new Vue({
        el:'#app',
    });
</script>

三、过滤器

1.Vue实例内部监视

watch: {
    // 方式1:普通类型的数据监视
    name: function (newValue, oldValue) {
        console.log(`name被改变,原值:${oldValue},新值:${newValue}`);
    },
  
    // 方式2:如果监视的是对象,需要开启深度监视
    user: {
        handler: function (newValue) {
            console.log(`user被改变,新值:`, newValue);
        },
        deep: true, // 开启深度监视,当对象中的属性发生变化时也要监视
        immediate: true, // 立即触发
    },
    
    // 方式3:只监视对象的某个属性,需要用引号引起来
    'user.age': function (newValue, oldValue) {
        console.log(`user.age被改变,原值:${oldValue},新值:${newValue}`);
    },
}

2.Vue方法进行监视

// 方式2:通过Vue实例的$watch()方法
let unwatch = vm.$watch(
    'user',
    function (newValue, oldValue) {
        // 返回一个函数,用于取消监视
        console.log(`user被改变,新值:`, newValue);

        // 当年龄大于50时取消监视
        if (newValue.age > 50) {
            console.log('取消监视。。。。。');
            unwatch(); // 调用函数,取消监视
        }
    },
    {
        deep: true, // 开启深度监视,当对象中的属性发生变化时也要监视
        immediate: true, // 立即触发
    }
);
最后修改:2020 年 08 月 31 日 12 : 19 AM