浅谈vue中的计算属性和侦听属性
计算属性
计算属性用于处理复杂的业务逻辑
计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算
计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单输入绑定</title>
</head>
<body>
<div id="app"> {{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //直接使用计算属性中的函数就是所要的数据 </div>
</body>
<script src="vue.js"></script> //vue的js，不然使用不了vue语法
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
computed: {
reverseMsg () { // 计算属性是一个函数，返回一个值，使用和data中的选项一样
console.log('computed') // 执行1次 --- 依赖性
return this.msg.split('').reverse().join('');
}
}
})
</script>
</html>
侦听属性(监听属性)
vue提供了检测数据变化的一个属性 watch 可以通过 newVal 获取变化之后的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单输入绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }} </div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: '李',
lastname: '小龙',
fullname: '李小龙'
},
watch: { // 侦听属性
firstname (newVal, oldVal) { // newVal变化之后的值
this.fullname = newVal + this.lastname // 当改变 姓 的时候执行
},
lastname (newVal, oldVal) {
this.fullname = this.firstname + newVal // 当改变 名字 的时候执行
}
}
})
</script>
</html>
浅谈vue中的计算属性和侦听属性的更多相关文章
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue-计算属性和侦听属性
复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- 浅谈Vue中的Prop
Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
随机推荐
- 中国古风唯美水墨工作计划汇报PPT模板推荐
模版来源:http://ppt.dede58.com/
- TSC打印机防重码在线检测系统
条码标签作为产品的一个身份标识,被应用得越来越普及,但随着使用量的增大,在打印条码流水号的过程中,偶尔会出现打印重复号码的标签出现,这样对产品生产及管理过程中会产生极大的混乱,会收到严重的客诉及返工, ...
- U盘启动安装系统之旅----记录自己的第一次操作
网上也有很多装系统的教程,这篇主要是对自己第一次装系统的一个记录,很惭愧,现在才尝试第一次用U盘启动装系统.经常有人说,系统都不会装,就别说搞这行的.当你会了,你就会觉得其实它真的是一件很简单的事情. ...
- 团队项目之Scrum5
小组:BLACK PANDA 时间:2019.11.25 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 实现文章展示页面 完善后台的编辑功能接口 今天计划完成的工作 2 ...
- ReactNative: 使用尺寸类Dimensions获取屏幕尺寸
一.简介 在前面创建使用组件时,虽然使用的都是伸缩盒子布局,但是很少使用宽高来进行绝对定位.在iOS中可以通过UIScreen控件获取当前屏幕的宽高,同样地,在RN中提供了一个尺寸组件Dimensio ...
- Java实现自定义注解开发
Java实现自定义注解开发 一直都对注解开发挺好奇的,最近终于有时间自己实践了一把,记录一下 万一后期会用到呢 哈哈哈 首先我们了解一下自定义注解的标准示例,注解类使用 @interface 关键字修 ...
- Ruby入门1
由于部门的自动化是由一个前辈实现的,他使用的Ruby的语言来实现的,所以需要学习一下Ruby语言,争取在15天左右可以掌握Ruby语言!加油~~~ 1.常量&变量 # 1.常量 # 一般用大写 ...
- Go-获取变量数据类型
package main import ( "fmt" "reflect" //这个包里的TypeOf方法获取变量数据类型 ) func main(){ b : ...
- PHP+Ajax实现文章心情投票功能实例
一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户coo ...
- PostgreSQL 修改表字段常用命令
--数据库.模式.表名 "identities"."Test"."tab_test" --修改字段名 ALTER TABLE "i ...