Vue使用函数实现计算属性、计算属性的实现和简写

最新推荐文章于 2024-08-24 19:20:15 发布

Bulut0907

最新推荐文章于 2024-08-24 19:20:15 发布

阅读量384

点赞数 8

分类专栏： Vue 文章标签： vue.js 使用函数实现计算属性计算属性计算属性简写计算属性的实现

本文链接：https://blog.youkuaiyun.com/yy8623977/article/details/131624316

版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

1. 使用函数实现计算属性

当修改姓或名，vue会去重新加载模板，然后函数也会被调用。但如果模板中存在多个fullName()，则会被调用多次而不是一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

</body>
</html>

效果如下：
函数实现计算属性

2. 计算属性

通过computed来定义计算属性。计算属性不能通过vm._data访问

可以设置getter方法

当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
getter调用时候。初次读取fullName时，或所依赖的数据发生变化时

可以设置setter方法。当fullName被修改时setter被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName: {
                get() {
                    // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                set(value) {
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

</body>
</html>

效果如下：
计算属性

3. 计算属性简写

当计算属性只要getter，没有setter，可以进行简写

        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName

            }
        }

Vue使用函数实现计算属性、计算属性的实现和简写

目录

1. 使用函数实现计算属性

2. 计算属性

3. 计算属性简写