vue的计算属性

Vue中计算属性(computed)的使用示例

牛肉菠萝粒

于 2023-07-26 19:58:34 发布

阅读量435

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jinianling/article/details/131946623

文章介绍了Vue框架中计算属性的概念，用于在需要对数据进行计算并获取新值时使用。计算属性以方法形式定义，但编译后以实例属性存在，并且其结果会被缓存，只有当依赖改变时才会重新计算。文中通过计算BMI（身体质量指数）的例子，展示了如何在Vue组件中创建和使用计算属性。

vue的计算属性

实力上面的computed属性
使用场景:
- 使用一些数据时，需要进行变形计算,从而得到新值，这个时候就可以使用计算属性
注意:
- 计算属性在定义时是方法,但是编译的时候是挂载实例作为实例属性存在
- 计算属性，一旦计算完成后，立即根据依赖将结果缓存，在多次使用时，只要依赖没有改变，不会重新计算，使用缓存的值

下面来看一个实例

输入一个人的身高和体重，从而计算个人的BMI
BMI = 体重 / 身高 ^ 2

    <div id="app" v-cloak>
        体重:<input type="number" placeholder="请输入体重" v-model="weight">
        身高: <input type="number" placeholder="请输入身高" v-model="height">
        <br>
        您的BMI为:{{ calcBMI }}
    </div>

        const { createApp } = Vue
        const app = createApp({
            data(){
                return{
                    weight:0,
                    height:0
                }
            },
            computed: {
                calcBMI(){
                    if(this.weight === 0 ){
                        return 0
                    }
                    return this.weight / this.height / this.height
                }
            },
            //实例的方法，会自动触发
            mounted(){
                console.log(this)
            }
        })
        app.mount("#app")