1、计算属性

1.1 计算属性实现

提示：注意观察使用method方法实现和计算属性实现的差距

1.1.1 基础知识

计算属性：

  • 1、定义：要用的属性不存在，要通过已有属性计算得来。
  • 2、原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
  • 3、get函数什么时候执行？
    (1)、初次读取时会执行一次。
    (2)、当依赖的数据发生改变时会被再次调用。
  • 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  • 5.备注：
    1、计算属性最终会出现在vm上，直接读取使用即可。
    2、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

1.1.2 代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="App">

        姓：<input type="text" v-model="firstName" /> <br /><br />

        名：<input type="text" v-model="lastName" /> <br /><br />

        全名：<span>{{fullName}}</span>

        全名：<span>{{fullName}}</span> <br /><br />

        全名：<span>{{fullName}}</span> <br /><br />

        全名：<span>{{fullName}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例

        const vm = new Vue({

            el: '#App',

            data: {

                firstName: "李",

                lastName: "四",

            },

            methods: {},

            computed: {

                fullName: {

                    get() {

                        console.log('get被调用了')

                        console.log(this)

                        return this.firstName + '-' + this.lastName

                    },

                    //set什么时候调用? 当fullName被修改时。

                    set(value) {

                        console.log('set', value)

                        const arr = value.split('-')

                        this.firstName = arr[0]

                        this.lastName = arr[1]

                    }

                }

            }

        })

    </script>

</body>

</html>

1.1.3 测试效果


1.2 计算属性简写

1.2.1 简写代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="App">

        姓：<input type="text" v-model="firstName" /> <br /><br />

        名：<input type="text" v-model="lastName" /> <br /><br />

        全名：<span>{{fullName}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例

        const vm = new Vue({

            el: '#App',

            data: {

                firstName: "李",

                lastName: "四",

            },

            methods: {},

            computed: {

                //完整写法

                /* fullName: {

                 get() {

                       console.log('get被调用了')

                       console.log(this)

                       return this.firstName + '-' + this.lastName

                   },

                   set(value) {

                       console.log('set', value)

                       const arr = value.split('-')

                       this.firstName = arr[0]

                       this.lastName = arr[1]

                   }

                   }

               */

                //简写

                fullName() {

                    console.log('get被调用了')

                    return this.firstName + '-' + this.lastName

                }

            }

        })

    </script>

</body>

</html>

1.3 使用插值语法实现

1.3.1 代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="App">

        姓：<input type="text" v-model="firstName"/> <br/><br/>

        名：<input type="text" v-model="lastName"/> <br /><br />

        全名：<span>{{firstName}}-{{lastName}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例

        new Vue({

            el: '#App',

            data: {

                firstName: "李",

                lastName: "四",

            }

        })

    </script>

</body>

</html>

1.3.2 实现效果

1.4 使用methods实现

1.4.1 代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="App">

        姓：<input type="text" v-model="firstName" /> <br /><br />

        名：<input type="text" v-model="lastName" /> <br /><br />

        全名：<span>{{fullName()}}</span>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例

        new Vue({

            el: '#App',

            data: {

                firstName: "李",

                lastName: "四",

            },

            methods:{

                fullName(){

                    console.log(this)

                    return this.firstName + '-' + this.lastName

                }

            }

        })

    </script>

</body>

</html>

1.4.2 实现效果


Vue学习之--------计算属性（2022/7/9）的更多相关文章

  1. vue学习笔记 计算属性（四）

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  2. VUE学习之计算属性computed

    计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...

  3. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  5. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  6. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  7. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  8. 关于vue的使用计算属性VS使用计算方法的问题

    在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里: <div id="example"> <p& ...

  9. vue.js实战——计算属性

    1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...

随机推荐

  1. 你有对象类,我有结构体,Go lang1.18入门精炼教程，由白丁入鸿儒，go lang结构体(struct)的使用EP06

    再续前文,在面向对象层面,Python做到了超神:万物皆为对象,而Ruby,则干脆就是神:飞花摘叶皆可对象.二者都提供对象类操作以及继承的方式为面向对象张目,但Go lang显然有一些特立独行,因为它 ...

  2. Luogu3694 邦邦的大合唱站队 （状压DP）

    状态由\(从前往后排好的长度\)和\(排好的团队\)决定,\(DP\)方程挺有思考价值的. #include <iostream> #include <cstdio> #inc ...

  3. java-代码操作服务器之SSH连续发送命令

    java操作Linux服务器可以使用专用的jar包,这里介绍使用jsch操作Linux服务器 maven 依赖 <dependency> <groupId>com.jcraft ...

  4. java-前端之css

    css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...

  5. 操作 Excel 函数的快捷键

    使用 Excel 函数的时候,需要用两个基本的快捷键来辅助写函数.输入函数时,Excel 会给出建议,选中函数之后不建议用回车键,因为这样做会出现#NAME?,直接使用Tab键即可.之后,通过Ctrl ...

  6. 获取进程产生了多少次pagefault

    怎么获取某个进程产生了多少次pagefault? 这个在ps 命令中可以看到,比如查看java的pagefault情况. ps -o maj_flt -o min_flt -p `ps -e|grep ...

  7. 刷题记录：Codeforces Round #734 (Div. 3)

    Codeforces Round #734 (Div. 3) 20210920.网址:https://codeforces.com/contest/1551. 编程细节:下标定义不要一会[1,n]一会 ...

  8. Clickhouse基准测试实践

    1.概述 本篇博客将对MySQL.InfluxDB.Clickhouse在写入时间.聚合查询时间.磁盘使用等方面的性能指标来进行比较. 2.内容 比较的数据集,是使用的Clickhouse官网提供的6 ...

  9. 再谈NULL和nullptr(C++11)区别

    在谈NULL和nullptr区别之前,我们先看段代码: #include "stdafx.h" #include <iostream> using namespace ...

  10. DFS算法-求集合的所有子集

    目录 1. 题目来源 2. 普通方法 1. 思路 2. 代码 3. 运行结果 3. DFS算法 1. 概念 2. 解题思路 3. 代码 4. 运行结果 4. 对比 1. 题目来源 牛客网,集合的所有子 ...