前端VUE3.0,DAY12，计算属性

最新推荐文章于 2024-07-24 22:25:19 发布

疯子的梦想＠

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量296

点赞数

分类专栏：前端文章标签： vue javascript js

本文链接：https://blog.csdn.net/weixin_48681463/article/details/119393572

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY12

姓名案例计算属性实现

1.计算属性，就是拿着已有的属性去计算创造一个全新的属性。注意一个computed的用法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>姓名案例—计算属性实现</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--br是换行符-->
    <div id="root">
        <!--使用v-model进行双向数据绑定，使得输入框内数据改变时，data也会改变，data里的参数改变时，输入框也会改变。-->
        姓:<input type="text" v-model:value="xing"><br>
        名:<input type="text" v-model:value="ming"><br>
        全名:<span>{{fullname}}</span><br>
        全名:<span>{{fullname}}</span>
        <!--调用函数的返回值做插值-->
        <!--在插值括号里调用函数的时候要加括号（），这里是对象的形式，所以不加（）-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    //创建vue实例

    //细节需要注意：当vue的data中的任意数据发生变化，则vue模板就会在重新解析一次。然后更新用到data中数据的地方
    const vm = new Vue({
        el: '#root',
        data: {
            //左侧叫属性名：右侧的value叫属性值
            xing: '张',
            ming: '三',

        },
        //computed是计算属性的意思,因为计算属性的过程可能复杂，所以fullname写成对象的形式加括号（）
        computed: {
            fullname: {
                //get是当有人在读取fullname时，get就会被调用，且返回值就作为fullname的值
                //get什么时候调用呢？1.初次读取fullname时，第二次在读取时，是直接从缓存中读取。get就不被再次调用了。
                //2.所依赖的数据发生变化时（xing或者ming变化时）。
                get() {
                    console.log('get函数被调用了');
                    //console.log(this);//打印输出this，验证了此处的this就是vm，那么下边就可以用this拿vm的内容
                    return this.xing + '-' + this.ming
                }
            }
        }

    })
</script>

</html>

在这里插入图片描述

使用set（）｛｝的方法修改计算属性

1.在网页中按F12，在console中修改计算属性，可以看到，修改后的fullname，同时在页面显示框中更新了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>姓名案例—计算属性实现</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--br是换行符-->
    <div id="root">
        <!--使用v-model进行双向数据绑定，使得输入框内数据改变时，data也会改变，data里的参数改变时，输入框也会改变。-->
        姓:<input type="text" v-model:value="xing"><br>
        名:<input type="text" v-model:value="ming"><br>
        全名:<span>{{fullname}}</span><br>
        全名:<span>{{fullname}}</span>
        <!--调用函数的返回值做插值-->
        <!--在插值括号里调用函数的时候要加括号（），这里是对象的形式，所以不加（）-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    //创建vue实例

    //细节需要注意：当vue的data中的任意数据发生变化，则vue模板就会在重新解析一次。然后更新用到data中数据的地方
    const vm = new Vue({
        el: '#root',
        data: {
            //左侧叫属性名：右侧的value叫属性值
            xing: '张',
            ming: '三',

        },
        //computed是计算属性的意思,因为计算属性的过程可能复杂，所以fullname写成对象的形式加括号（）
        computed: {
            fullname: {
                //get是当有人在读取fullname时，get就会被调用，且返回值就作为fullname的值
                //get什么时候调用呢？1.初次读取fullname时，第二次在读取时，是直接从缓存中读取。get就不被再次调用了。
                //2.所依赖的数据发生变化时（xing或者ming变化时）。
                get() {
                    console.log('get函数被调用了');
                    //console.log(this);//打印输出this，验证了此处的this就是vm，那么下边就可以用this拿vm的内容
                    return this.xing + '-' + this.ming
                },
                set(value) {
                    //修改计算属性
                    console.log('set', value);
                    const arr = value.split('-')
                    this.xing = arr[0]
                    this.ming = arr[1]
                }
            }
        }

    })
</script>

</html>

在这里插入图片描述

总结

计算属性:
1.定义: 要用的属性不存在，要通过已有属性计算得来
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY12，计算属性

VUE3.0,DAY12姓名案例计算属性实现使用set（）｛｝的方法修改计算属性总结姓名案例计算属性实现1.计算属性，就是拿着已有的属性去计算创造一个全新的属性。注意一个computed的用法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫

专栏目录