Vue学习之--------计算属性（2022/7/9）
文章目录
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）的更多相关文章
- vue学习笔记 计算属性（四）
计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- 关于vue.js的计算属性练习代码
参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 关于vue的使用计算属性VS使用计算方法的问题
在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里: <div id="example"> <p& ...
- vue.js实战——计算属性
1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...
随机推荐
- React报错之无法在未挂载的组件上执行React状态更新
正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...
- MySQL金融应用场景下跨数据中心的MGR架构方案（1）
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 0. 内容提纲 运行环境 部署MGR A&B 部署MGR A.B之间的复制通道 几个注意事项 如何在多个数据中心部 ...
- 轮询以及webSocket与socket.io原理
概述: 首先,我们知道,起初的http协议只是为了能够进行通信而被创造出来(也就是请求-响应的过程).并没有双向通信这一说,后面随着历史业务的需求,人们使用轮询http来解决双向通信也就是使用xhr或 ...
- DolphinScheduler 功能开发：⼯作流级别任务空跑（后端），测试工作流是否正确执行...
点击上方 蓝字关注我们 ✎ 编 者 按 在今年由中国科学院软件研究所主办的开源软件所供应链点亮计划-开源之夏活动中,有不少小伙伴提交了关于 DolphinScheduler 的项目,本期是来自成都信息 ...
- 来看看这位年轻的 eBay 小伙是如何成为 Committer
介绍一下我自己 目前就职于eBay中国,专注于微服务中间件,分布式架构等领域,同时也是狂热的开源爱好者. 如何成为一个commiter 过去几个月,我一直持续在为 Apache DolphinSche ...
- Minio分布式集群部署——Swarm
最近研究minio分布式集群部署,发现网上大部分都是单服务器部署,而minio官方在github上现在也只提供了k8s和docker-compose的方式,网上有关与swarm启动minio集群的文章 ...
- Spring源码-xml解析
Spring使用SAX解析xml.SAX的全称是Simple APIs for XML,也即XML简单应用程序接口.与DOM不同,SAX提供的访问模式是一种顺序模式,这是一种快速读写XML数据的方式. ...
- 随机视频API
首先打开服务器创建一个html文件也可以不创建 代码如下 点击查看代码 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- 大家都能看得懂的源码 - 那些关于DOM的常见Hook封装（二）
本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. us ...
- idea中设置注释颜色
1. 打开idea,右上角File-->Settings 2.找到Language Defaults-->Comments里面Block comment和Line comment 3.Bl ...