[vue]计算和侦听属性(computed&watch)
先看一下计算属性
vue只有data区的数据才具备响应式的功能.
- v-text里可以写一些逻辑
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
- 不过页面有大量引用这种逻辑, 显得就不太酷了, 将这种需要处理的属性写到computed里
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
参考
计算属性持续追踪它的响应依赖。在计算一个计算属性时,Vue.js 更新它的依赖列表并缓存结果,只有当其中一个依赖发生了变化,缓存的结果才无效。因此,只要依赖不发生变化,访问计算属性会直接返回缓存的结果,而不是调用 getter。
下面的栗子,只有msg发生变化时,才会重新计算.即调用属性的get方法.
- 只有当this.msg更改时,才会触发computed重新计算
<div id="app">
<input type="text" v-model="msg">
{{example}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
computed: {
example() {
return Date.now() + this.msg;
}
}
})
</script>
- 栗子2: 全选按钮
<div id="app">
全选: <input type="checkbox" v-model="checkAll"> <br>
<input type="checkbox" v-for="product in products" v-model="product.isSelected">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "maotai",
products: [
{productName: 'python', isSelected: false},
{productName: 'go', isSelected: true},
],
},
computed: {
checkAll: {
get() { //计算checkall的值
return this.products.every(item => item.isSelected);
},
set(val) {//根据checkall的值计算每项该不该选
this.products.forEach(item => item.isSelected = val);
}
}
}
})
- 仅有少数computed属性需要set, 绝大多数只有get(可以省略关键词)
<div id="app">
<input type="text" placeholder="price1" v-model="price1">
<input type="text" placeholder="price2" v-model="price2"> <br>
总价格: {{price3}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'maotai',
price1: 1,
price2: 2,
},
computed: {
price3() {
return parseInt(this.price1) + parseInt(this.price2);
}
}
})
</script>
[vue]计算和侦听属性(computed&watch)的更多相关文章
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- 六、vue侦听属性
$watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...
- Vue 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 <!DOCTYPE html> <html> <head> <meta cha ...
- vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...
随机推荐
- Java 使用单例模式的注意事项
某个类使用单例模式实现,如果该类里面含有List或Map等集合,使用时,请注意两点 1. List或Map 等集合使用前,需要判断是否已经数据,调用clear()方法先清除掉 2. List或Map ...
- sencha touch 简单的倒计时插件
效果如图: 代码: Ext.define('ux.label.Countdown', { alternateClassName: 'labelCountdown', extend: 'Ext.Comp ...
- sencha touch datepicker/datepickerfield(时间选择控件)扩展(废弃 仅参考)
参考资料:https://market.sencha.com/extensions/datetimepicker 上面的扩展在2.2有些问题,参考源码重新写了一个 TimePicker: Ext.de ...
- [转]OpenStack Keystone V3
Keystone V3 Keystone 中主要涉及到如下几个概念:User.Tenant.Role.Token.下面对这几个概念进行简要说明. User:顾名思义就是使用服务的用户,可以是人.服务或 ...
- HDU 2102 A计划(BFS/DFS走迷宫)
A计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 问题记录,如何解决confluence的office预览的时候的乱码问题
在新的服务器(ubuntu16.04)上安装confluence,预览office的附件的时候,发现中文无法正确显示 在网上搜了一下,搜到一篇官方的文档,是关于这个问题的 问题原因: 在服务器上没有安 ...
- 如何分离p12(或pfx)文件中的证书和私钥
p12(或者pfx)文件里一般存放有CA的根证书,用户证书和用户的私钥 假设我们有一个test.p12文件 在安装了openssl的linux服务器上执行以下命令: 提取用户证书: openssl p ...
- 无线路由器无线AP模式的配置
环境介绍>>>>>>>>>>>>>>>>>>>交换机类型:三层交换机无线路由器品牌:T ...
- 【LOJ6254】最优卡组 堆(模拟搜索)
[LOJ6254]最优卡组 题面 题解:常用的用堆模拟搜索套路(当然也可以二分).先将每个卡包里的卡从大到小排序,然后将所有卡包按(最大值-次大值)从小到大排序,并提前处理掉只有一张卡的卡包. 我们将 ...
- Unity3D笔记 GUI 一
要实现的功能: 1.个性化Windows界面 2.减少个性化的背景图片尺寸 3.个性化样式ExitButton和TabButton 4.实现三个选项卡窗口 一.个性化Windows界面 1.1.创建一 ...