【Vue2.0学习】—计算属性(三十四)

简介: 【Vue2.0学习】—计算属性(三十四)


  • 定义:要用的属性不存在,要通过已有的属性得来
  • 原理:底层借助了Object.defineproperty方法提供的gettersetter

get函数什么时候执行?

  • 初次读取时会执行
  • 当依赖的数据发生变化时会被再次调用
  • 优势:与methods实现相比,内部有缓存机制,效率更高,调式方便

备注:

  • 计算属性最终会出现在vm上,直接读取使用即可
  • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
<div id="root">
        姓:<input type="text" v-model="firstname"> <br> <br> 名: <input type="text" v-model="lastname"> <br> <br> 姓名:
        <span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                firstname: '张',
                lastname: '三'
            },
            computed: {
                fullName: {
                    //当有人读取fullName时,get就会被调用且返回值作为fullName的值
                    // get什么时候调用?初次读取fullName时;所依赖的数据发生变化
                    get() {
                        console.log('get被调用了');
                        return this.firstname + '-' + this.lastname
                    },
                    set(value) {
                        console.log('set', value);
                        const arr = value.split('-');
                        this.firstname = arr[0];
                        this.lastname = arr[1];
                    }
                }
            }
        })
    </script>

简写版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        计算属性:
        定义:要用的属性不存在,要通过已有的属性得来
        原理:底层借助了Object.defineproperty方法提供的getter和setter
        get函数什么时候执行?
        初次读取时会执行
        当依赖的数据发生变化时会被再次调用
        优势:与methods实现相比,内部有缓存机制,效率更高,调式方便
        备注:
        计算属性最终会出现在vm上,直接读取使用即可
        如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
     -->
    <div id="root">
        姓:<input type="text" v-model="firstname"> <br> <br> 名: <input type="text" v-model="lastname"> <br> <br> 姓名:
        <span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                firstname: '张',
                lastname: '三'
            },
            computed: {
                //完整写法
                //     fullName: {
                //         //当有人读取fullName时,get就会被调用且返回值作为fullName的值
                //         // get什么时候调用?初次读取fullName时;所依赖的数据发生变化
                //         get() {
                //             console.log('get被调用了');
                //             return this.firstname + '-' + this.lastname
                //         },
                //         set(value) {
                //             console.log('set', value);
                //             const arr = value.split('-');
                //             this.firstname = arr[0];
                //             this.lastname = arr[1];
                //         }
                //     }
                // }
                //简写
                fullName() {
                    return this.firstname + this.lastname
                }
            }
        })
    </script>
</body>
</html>


相关文章
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
49 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
22天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
2月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
25天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
55 1
|
28天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
19 1
|
30天前
|
缓存 JavaScript
|
21天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
78 0
|
2月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
2月前
如何在 Vue3 中创建一个计算属性?
如何在 Vue3 中创建一个计算属性?
44 1
|
28天前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
20 0