Vue中计算属性

  一般情况下属性都是放在data中的,但是有些属性可能是需要经过一些计算才能得出,那么,我们可以把这类属性变成计算属性。此时,需要将这些计算属性写到computed中,和将属性写在data中是一样的。表面上看,计算属性和methods一样,实际上,计算属性更加智能,他是基于它们的响应式依赖进行缓存的。也就是说,只要相关依赖(比如下面的例子中的“area”)没有发生变化,那么这个计算属性的函数就不会重新执行,而是直接返回之前的值。这个缓存功能使计算属性访问起来更高效。

    

计算属性set:

set方法是用于修改data中定义属性的值的方法。例如先写了需要根据详细地址拆出省、市、区。在使用set方法时必须提供get方法。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Vue中计算属性</title>
</head>

<body>
    <div id="app">
        <div>
            <label>长:</label>
            <input type="text" v-model:value="length2">
        </div>
        <div>
            <label>宽:</label>
            <input type="text" v-model:value="width2">
        </div>
        <div>
            面积:{{area}}
        </div>注:v-model:value是将该输入框的值与data中的值进行绑定。
        <h4>计算属性set:</h4>
        <div>
            <label>省:</label>
            <input type="text" name="province" v-model:value="province">
        </div>
        <div>
            <label>市:</label>
            <input type="text" name="city" v-model:value="city">
        </div>
        <div>
            <label>区:</label>
            <input type="text" name="district" v-model:value="district">
        </div>
        <div>
            <label>详细地址:</label>
            <input type="text" v-model:value="address">
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                length2: 0,
                width2: 0,
                province: ‘‘,
                city: ‘‘,
                district: ‘‘,
            },
            computed: {
                area() {
                    return this.length2 * this.width2
                },
                address: {
                    get() {
                        let ret = ‘‘
                        if (this.province) {
                            ret += this.province + ‘省‘
                        };
                        if (this.city) {
                            ret += this.city + "市"
                        };
                        if (this.district) {
                            ret += this.district + "区"
                        }
                        return ret
                    },
                    set(value) {
                        let ret = value.split(/省|市|区/)
                        if (ret && ret.length > 0) {
                            this.province = ret[0]
                        }
                        if (ret && ret.length > 1) {
                            this.city = ret[1]
                        }
                        if (ret && ret.length >2){
                            this.district = ret[2]
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

原文地址:https://www.cnblogs.com/xshan/p/12334927.html

时间: 2024-10-07 05:46:56

Vue中计算属性的相关文章

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

vue中计算属性和侦听属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue的计算属性

在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中的数据发生变化时.所有依赖计算属性中的函数也会更新.而且最妙的是,我们已经以声明的方式创建了这种依赖关系:计算属性的getter是没有副作用的,这使得它易于推理和测试. 1,计算属性与methods 我们将同一函数定义为method,而不是一个计算属性,得到的结果都是一样的.然而两者的不同:计算属性

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

Vue.js 计算属性

Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8"> <title>computed</title> <script src="vue.min.js"></script> </head> <body> <div id="app"

Vue之计算属性

上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for来加载妹子图片,现在我想在原先的基础上,添加两个按钮,一个用来增加一个妹子,一个用来减少一个妹子: html: <div id="vfor"> <template v-for="mm in mms"> <span>{{mm.name}

通俗易懂了解Vue的计算属性

1.前言 之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处.今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下. 2.为什么要使用计算属性 试想有这样一个场景: 当我们在网购的时候,打开购物车,我们在增加或减少购物车内货物的数量时,下面的消费总额也在随着联动变化. 那么有了这个场景,我们用vue来简单实现一下.话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html lang="en

VUE:计算属性和监视

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.计算属性: 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2.监视属性: 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时,回调函数自