从零开始学VUE之模板语法(计算属性)

最新推荐文章于 2023-01-09 17:57:35 发布

十六夜之彼岸舞

最新推荐文章于 2023-01-09 17:57:35 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/flowerStream/article/details/117505605

版权

计算属性

setter与getter

使用计算属性简化表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{firstName + ' ' + lastName}}</div>
    <!--  简化写法,复用,不用每次都写拼接 -->
    <div>{{fullName}}</div>
<!--    执行方法设置 fullName-->
    {{setFullName()}}
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            firstName: 'Mr',
            lastName: 'zhang'
        },
        methods:{
            setFullName(){
                this.fullName = 'Mr li'
            }
        },
        // 计算属性
        computed: {
            // 虚拟字段
            fullName: {
                // 获取方法
                get() {
                    return this.firstName + ' ' + this.lastName
                },
                // 设置方法
                set(value){
                    if(undefined != value && null != value){
                        let fullName = value.split(" ");
                        this.firstName = fullName[0];
                        this.lastName = fullName[1];
                    }
                }
            }
        }
    })
</script>
</html>

运行结果

计算属性对比函数

可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

作者：彼岸舞

时间：2021\05\31

内容关于：VUE

本文属于作者原创,未经允许,禁止转发