vuejs的计算属性使用方法

最新推荐文章于 2024-07-24 14:58:19 发布

一只爱web的羊驼

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量68

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_63656102/article/details/130160137

版权

首先计算属性我们得知道是干什么的，能做什么？

一个最简单的例子：

比如我这个网页有两个文本框，怎么把里面的文字联合起来成为一段文字呢？

这就需要用到计算属性了，虽然用插值运算也可以做，但是效率不是很高

知道了是什么问题，那么就好办了，就是把两段文字合并成一段文字，因为是动态变化的，所以要监听每一个文本框内容才可以。

这就会让我们想起Objcet.defineproperty方法来实现双向绑定时刻监听每一个文本框

在vue中已经封装好了get和set，我们这里只需要get就可以了,因为不需要修改，再加上get有缓存机制，可以大大提高效率，只有所依赖的数据发生变化才会更新新的值

所以核心所下:

 computed: {
                add:{
                   get(){
                        // console.log(this);
                        return this.onw+this.two;
                    },
                    set(value){
                        this.two=value;
                        this.onw=value;
                    }
                }
           }

基本上是能够看得懂的

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vuejs/vue.js"></script>
</head>
<body>
    <div class="root">
        <input v-model:value="onw" type="text" />
        <input v-model:value="two" type="text" />
        <span>联和:{{add}}</span>
    </div>
    <script>
       const vm = new Vue({
            el:".root",
            data () {
                return {
                    onw:"第一个",
                    two:"第二个"
                }
            },
            // components计算属性
           computed: {
                add:{
                   get(){
                        // console.log(this);
                        return this.onw+this.two;
                    },
                    set(value){
                        this.two=value;
                        this.onw=value;
                    }
                }
           }
        })
    </script>
</body>
</html>

如果还不明白可以粘贴代码取实践运行一下就明白了

一只爱web的羊驼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vuejs的计算属性使用方法

在vue中已经封装好了get和set，我们这里只需要get就可以了,因为不需要修改，再加上get有缓存机制，可以大大提高效率，只有所依赖的数据发生变化才会更新新的值。知道了是什么问题，那么就好办了，就是把两段文字合并成一段文字，因为是动态变化的，所以要监听每一个文本框内容才可以。比如我这个网页有两个文本框，怎么把里面的文字联合起来成为一段文字呢？这就需要用到计算属性了，虽然用插值运算也可以做，但是效率不是很高。如果还不明白可以粘贴代码取实践运行一下就明白了。方法来实现双向绑定时刻监听每一个文本框。
复制链接

扫一扫