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 ...
随机推荐
- java Suspicious regex expression "." in call to 'replaceAll()' 问题延展
因为要处理从身份证读取到的有效期时间,所以用到了replaceAll这个方法,类似如下代码: String s1 = s.replaceAll(".", "-" ...
- MySQL主从复制原理及搭建过程
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 复制概述 复制即把一台服务器上的数据通过某种手段同步到另外一台或多台从服务器上,使得从服务器在数据上与主服务器保持一致. ...
- 达人专栏 | 还不会用 Apache Dolphinscheduler？大佬用时一个月写出的最全入门教程【三】
作者 | 欧阳涛 招联金融大数据开发工程师 02 Master启动流程 2.10 WorkFlowExecutorThread 里执行 Submit StandByTask 方法 SubmitStan ...
- [HDU6057] Kanade‘s convolution （FWT）
题面 出自HDU6057 给你两个数列 A [ 0... 2 m − 1 ] A[0...2^m-1] A[0...2m−1] 和 B [ 0... 2 m − 1 ] B[0...2^m-1] B[ ...
- java数组---多维数组
多维数组 多维数组可以看成是数组的数组 比如二维数组就是一个特殊的一维数组,其每一个元素都是一个一维数组. 二维数组 public static void main(String[] args) { ...
- Python自学教程8-数据类型有哪些注意事项
不知不觉,python自学教程已经更新到第八篇了,再有几篇,基本的语法就介绍完了. 今天来总结一下数据类型有哪些需要注意的地方. 元组注意事项 元组是另一种经常使用到的数据类型,看上去和列表差不多.它 ...
- django_day03
django_day03 Django的view(视图) CBV和FBV FBV:function based view 基于函数的视图 CBV:class based view 基于类的视图 fro ...
- Linux之LVM逻辑卷管理
LVM逻辑卷管理 LVM机制:PV物理卷,VG卷组,LV逻辑卷. --功能-- --物理卷管理-- --卷组管理-- --逻辑卷管理-- create(建立) pvcreate vgcreate lv ...
- 在hyper-v虚拟机中安装并配置linux
虽然都是自己写的,还是贴个原文链接吧,如果文章里的图片错乱了,可能就是我贴错了,去看原文吧. 多图警告 WSL2真香? WSL2相比于WSL1前者更类似于虚拟机,配合上Windoes Terminal ...
- Lua CallbackHell优化
概述 在异步操作中,常常要使用回调.但是,回调的嵌套常常会导致逻辑混乱,一步错步步错,难以维护.在Lua中,可以使用协程进行优化. 问题分析 模拟一个回合制游戏攻击过程 local function ...