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 ...
随机推荐
- 2022了你还不会『低代码』？数据科学也能玩转Low-Code啦！ ⛵
作者:韩信子@ShowMeAI 数据分析实战系列:http://www.showmeai.tech/tutorials/40 机器学习实战系列:http://www.showmeai.tech/tut ...
- gitpod.io，云端开发调试工具。
gitpod,一款在线开发调试工具,使用它你可以在网页上直接开发软件项目了. 比如你的项目仓库在github上,你可以直接在网址的前面添加gitpod.io/#,然后回车就能在网页上使用vscode打 ...
- ROS机械臂 Movelt 学习笔记5 | MoveIt Commander Scripting
前一讲python接口中提到moveit_commander 包.这个包提供了用于运动规划.笛卡尔路径计算以及拾取和放置的接口. moveit_commander 包还包括一个命令行接口程序movei ...
- LuoguP1240 诸侯安置
本来是来练组合的,不知怎么又开始水普及DP了 #include <cstdio> #include <iostream> #include <cstring> #i ...
- Linux 02 基本命令
参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 工具 清屏 cl ...
- Spring 03 切面编程
简介 AOP(Aspect Oriented Programming),即面向切面编程 这是对面向对象思想的一种补充. 面向切面编程,就是在程序运行时,不改变程序源码的情况下,动态的增强方法的功能. ...
- ansible 的安装及常见模块使用
ansible 基础keys的ssh协议配置的 特性:幂等性:一个任务执行1遍和执行n遍效果一样. ansible是个管理软件不是服务,不需要长期运行 一.通过epel源安装ansible, 1.下 ...
- 渗透攻防Web篇-深入浅出SQL注入
1 背景 京东SRC(Security Response Center)收录大量外部白帽子提交的sql注入漏洞,漏洞发生的原因多为sql语句拼接和Mybatis使用不当导致. 2 手工检测 2.1 前 ...
- 网安等保-Linux服务器之最新Ubuntu-22.04-LTS系统内核优化与安全加固配置脚本使用分享
关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 本章目录 目录 0x00 前言 ...
- ABC206 F - Interval Game 2 （区间DP，博弈论，SG函数）
题面 题意很简单 A l i c e \tt Alice Alice 和 B o b \tt Bob Bob 在博弈.摆在他们面前有 N \rm N N 个区间 [ l i , r i ) \rm[l ...