vue中的computed计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!--
    案例  -两个输入框一个span标签,当输入框输入值后,需要将两个框的值用 “ - ” 连接到一起展示到span中
    ·为什么要用这样的方法?用插值表达式可以达到这个效果,但是插值表达式里面不建议写太多逻辑,太长违反了vue的声明式的规范
    ·用vue的methods也可以完成,在里面定义方法,然后插值表达式用方法名(),即可拿到方法的返回值展示,但每次加载都会调用一次该方法,效率太低

    vue中的计算属性,vue中的属性指的是data里面的数据,计算属性意思就是计算data里面的数据,对data数据做一些操作然后展示
    1.定义:要用的属性不存在。要通过已经有的属性计算得来。
    2.备注:计算属性最终会出现在vm上,直接读取使用即可(不要在插值表达式里面加小括号())。
            如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变,才会触动get方法从而改变计算属性
-->
<div id = "app">
    姓名<input type="text" v-model="name">
    age<input type="text" value="" v-model="age">
    <span>{{fun}}</span><!--插值表达式里面写计算属性里面定义的方法,展示的是get里面的返回值,这里不能加小括号() -->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data :{
            name: "张三",
            age: "18"
        },

        computed:{//计算属性    传入配置对象
            fun:{//定义方法,需要执行这个方法具体逻辑
                get(){//写get方法,当容器里用到了上面的fun时,模板解析时就会执行这个get函数
                    //另外,这个get方法还有一个细节,如果多个地方用了fun,并不会多次调用这个get方法,因为vue有缓存,当多次用fun时,会去缓存读取,但当所依赖的数据发生变化时,也会再次调用
                    return this.name + "-" + this.age;//执行具体的逻辑,并返回,当模板解析到fun函数时,就会将返回值展示到页面上(this表示vm实例对象)
                },
                set(val){//与get相对应的还有set方法,当fun被修改使用时,就会执行set方法
                    let splice = val.split("-");//将修改的值根据字符裁切成数组
                    this.name = splice[0];//将裁切的第一个字符串赋值给vm实例对象的name属性
                    this.age = splice[1];//将裁切的第二个字符串赋值给vm实例对象的name属性
                    //这样操作就完成了整个系列的变化。
                    //当依赖的data属性发生变化时,会调用get方法,我们可以在get方法中编写逻辑代码,将自己需要计算的属性展示在页面中
                    //当fun被修改时,如vm.fun = “***” 它被执行时会调用set方法,我们可以在set方法中编写自己的逻辑
                    //比如上面代码,将修改时传入的参数切割并赋值给vm的data属性,并会引发页面用到这些属性的地方出发更新数据
                }
            }
        }
    })
</script>
</body>
</html>

 

上一篇:Android实现优雅快速的网络请求!


下一篇:【Android笔记】Kotlin结合Jetpack构建MVVM