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. thinkphp 5 及一下或php项目里实现模糊查询

    想在thinkPHP或者PHP项目实现模糊查询怎么实现呢? 今天在网上搜了一下用 mysql里的 like 就可以实现 怎么用呢? 看代码: 错误用法: where('title','like',$s ...

  2. Express 使用 Cookie

    在使用 Cookie 之前,需要给 Express 加载中间件,cookie-parser: npm i cookie-parser Express 使用中间件: import express fro ...

  3. 大家都能看得懂的源码 - ahooks 是怎么处理 DOM 的?

    本文是深入浅出 ahooks 源码系列文章的第十三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用 ...

  4. Java数据类型扩展及面试题讲解

    这是关于数据类型的面试题,还是比较重要的. 1.整数拓展: 我们肯定都或多或少知道一个问题,叫进制问题.咱们常见的电脑里的二进制,然后咱们平时生活中用的是十进制,然后咱们工作的时候还有一个十六进制跟八 ...

  5. 第六十八篇:vue-cli新建项目

    好家伙,之前只是一股脑得用,连里面的可选配置项都不清楚,今天来把它搞清楚 1.单页面应用 1.1.什么是单页面应用程序 单页面应用程序(英文名: Single Page Application)简称S ...

  6. 字节微服务HTTP框架Hertz使用与源码分析|拥抱开源

    一.前言 Hertz[həːts] 是一个 Golang 微服务 HTTP 框架,在设计之初参考了其他开源框架 fasthttp.gin.echo 的优势, 并结合字节跳动内部的需求,使其具有高易用性 ...

  7. KingbaseES V8R3集群维护案例之---在线添加备库管理节点

    案例说明: 在KingbaseES V8R3主备流复制的集群中 ,一般有两个节点是集群的管理节点,分为master和standby:如对于一主二备的架构,其中有两个节点是管理节点,三个数据节点:管理节 ...

  8. with function 语法支持

    通过with子句,我们可以把很多原本需要存储过程来实现的复杂逻辑用一句SQL来进行表达.KingbaseES 从V008R006C004B0021 版本开始,支持 with function 语法.例 ...

  9. 引擎之旅 前传:C++代码规范

    自己以前写代码时,一个项目一个风格.单人开发的工作使得我并没有注意到代码规范性和可读性的问题.每当项目结束后,看到自己杂乱无章的代码,完全没有二次开发和重构的欲望. 写代码就应该像写诗一样优雅. by ...

  10. Linux安装RabbitMQ教程(文件下载地址+安装命令+ 端口开放 + 用户创建 +配置文件模板+端口修改)

    前言 1.安装RabbitMQ前需先安装erlang, 且两者需要版本对应, 否则无法正常启动RabbitMQ (本教程使用22.0.7版本的erlang和3.8.6版本的Rabbitmq) 版本对应 ...