Vue-计算属性和侦听属性
复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里
<div id="app">
原值:{{ msg }} <br>
翻转后的值:{{ reverseMsg }}
</div>
<script>
new Vue({
el: '#app',
data: {
msg:'abc'
},
computed: {
reverseMsg:function () {
return this.msg.split('').reverse().join('');
}
}
})
</script>
计算属性会基于响应式依赖进行缓存,只有原值msg发生变化时,才会重新进行计算,否则会立即返回之前的计算结果
计算属性默认只有getter,当reverseMsg为一个对象时,可为其设置setter
var vm = new Vue({
el: '#app',
data: {
msg: 'abc'
},
computed: {
reverseMsg: {
get: function () {
return this.msg.split('').reverse().join('');
},
set: function (value) {
}
}
}
});
运行vm.msg = 'Sam'时,reverseMsg的setter会被调用
watch属性会监听所指定数据的变化,然后可执行对应函数
var vm = new Vue({
el: '#app',
data: {
msg: 'abc'
},
watch:{
msg:function (newValue,oldValue) {
}
}
});
oldValue为旧数据,newValue为新数据
学习资料
Vue-计算属性和侦听属性的更多相关文章
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- [Web 前端] 034 计算属性,侦听属性
目录 0. 方便起见,定个轮廓 1. 过滤器 2. 计算属性 2.1 2.2 3. 监听属性 0. 方便起见,定个轮廓 不妨记下方的程序为 code1 <!DOCTYPE html> &l ...
- vue中计算属性和侦听属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
随机推荐
- 随心测试_软测基础_005 <测试人员工作内容>
接上篇:清楚了_测试人员的工作职责范围,那每项 测试活动的具体工作内容有哪些呢? Q1:如何理解测试工程师的工作内容? A1:SX的观点:综合一体化 现如今互联网行业如何哪达,每一项IT职业的工作职责 ...
- IO模型介绍
先理解几个问题: (1)为什么读取文件的时候,需要用户进程通过系统调用内核完成(系统不能自己调用内核)什么是用户态和内核态?为什么要区分内核态和用户态呢? 在 CPU 的所有指令中,有些指令是非常危险 ...
- 02Spring Boot配置文件详解
02Spring Boot配置文件详解 文章指导 学习笔记 学习代码 自定义属性 在src/main/java/resources目录下创建一个application.properties或appli ...
- webpack(一) 配置
一.entry & output mode: 'development', // entry: './src/index', // entry: ['./src/index', './src ...
- 判断一个点是否在某个区域内。百度,高德,腾讯都能用。(php版)
<?php // *** 配置文件(表示区域的三维数组)其内的点,必须按顺时针方向依次给出! $area = array( // 天通苑店 0 => array( array('x'=&g ...
- vultr测速 看看vultr哪个地区节点速度快
很多网友用vultr的机子主要就是为了*** 所以对哪个区域节点的速度就非常在意 网上都说这个区域节点速度快,那个区域节点的速度快. 还是得自己亲自测试才知道哪个区域的速度快! 所以做了个ping本机 ...
- 运行错误:Application Error - The connection to the server was unsuccessful
在模拟器上上启动ionic4.6版本 打包成的android APK,启动了很久结果弹出这个问题: Application Error - The connection to the server w ...
- 熟悉常用的HBase操作
1. 以下关系型数据库中的表和数据,要求将其转换为适合于HBase存储的表并插入数据: 学生表(Student)(不包括最后一列) 学号(S_No) 姓名(S_Name) 性别(S_Sex) 年龄(S ...
- chainsql异常记录
- vim常用快捷键整理
搜索快捷键 / 关键字n 向下匹配N 向上匹配 移动光标快捷键 gg 命令将光标移动到文档开头,等同于 1GG 命令将光标移动到文档末尾0 或功能键[Home] 这是数字『 0 』:移动到这一行的最 ...