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 ...
随机推荐
- 青峰Flutter视频播放软件
下载地址: https://github.com/patton88/peak_flutter_player/raw/master/peak_flutter_player_v1.1.5_release0 ...
- MyBatis-Plus 配置文件
MyBatis-Plus在实际工作中常用到的配置,供自己和大家查阅学习. mybatis-plus: mapperPackage: com.**.**.mapper # 对应的 XML 文件位置 ma ...
- 透过inode来理解硬链接和软链接
什么是inode? 每个文件都对应一个唯一的inode,inode用来存储文件的元信息,包括: 对应的文件 文件字节数 文件数据块的位置 文件的inode号码 文件的硬链接数 文件的读写权限 文件的时 ...
- 原生应用、Web 应用和混合应用的概念，以及 Flutter 技术是什么
应用类型 原生应用 原生应用就是使用特定的语言开发的应用,例如 Android 原生应用.Windows 原生应用.iOS 原生应用等.开发 Android 原生应用时,其特定的编程语言为 Java ...
- linux 旁路掉协议栈的处理点
对于协议栈的发展,目前有三种处理趋势,一种是类似于使用dpdk的方式,然后将协议栈放到用户态来做,做得比较好的一般都是以bsd的协议栈为底子,可以参考的是腾讯开源的的方案,另外一种是,继续放在内核,但 ...
- CAD参数化功能的一些构想
cad二次开发人员通常对设计的具体业务不够理解,而设计人员对程序开发的学习成本也较高. 可否将cad的参数化功能搭建为二次开发人员与设计人员之间的桥梁. 如设计人员提前利用参数化功能建立对应的动态块, ...
- 从零开始Blazor Server(13)--消息通知
我们现在做了用户管理.角色管理.菜单管理. 但是大家有没有发现,我们的菜单要变化的话必须要刷新页面才行.这个体验感觉不太好. 今天我们就用全局通知组件来解决这个问题. 首先我们要改造以下我们的Main ...
- 超实用在线工具！能将文字加密为Emoji表情
试想一下,如果你需要将一段比较敏感的内容发送给你的好友. 但如果这段内容不小心外泄,被别人看到了,可能会带来很多麻烦. 那么,有什么方法能够让传输的文本内容不那么容易被"看破"呢? ...
- Java数据类型扩展及面试题讲解
这是关于数据类型的面试题,还是比较重要的. 1.整数拓展: 我们肯定都或多或少知道一个问题,叫进制问题.咱们常见的电脑里的二进制,然后咱们平时生活中用的是十进制,然后咱们工作的时候还有一个十六进制跟八 ...
- 项目实践2:项目中的CSS网页布局(常用)
好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...