Vue computed 计算属性

Vue About 753 words

含义

计算属性是为了方便代码服用,如拼接相关属性后生成的一个新的值,需要被多处地方使用,就可以使用计算属性这个功能来生成新字段避免重复代码。

computed属性下定义需要计算的属性函数,此函数名会被生成为Vue对象vm的属性。

如下所示:computed计算属性userInfo函数会返回usernameagegender拼接后的新字符串,Vue会生成一个userInfo的属性,挂载在Vue对象上。

完整代码

<div id="app">

    {{ userInfo }}

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username: "张三",
            age: 18,
            gender: "男"
        },
        computed: {
            userInfo() {
                return `${this.username} - ${this.age} - ${this.gender}`;
            }
        },
        methods: {
            getInfo() {
                console.log(this.userInfo);
            }
        }
    });
    console.log(vm)
    console.log(vm.userInfo)
</script>
Views: 764 · Posted: 2023-01-03

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh