vue的计算属性computed和监听器watch
<template>
<div>
this is A.vue <br>
<!--计算属性-->
<label for="msg">输入message:</label>
<input type="text" v-model="message" id="msg">
<div>this is the reversedMessage: {{reversedMessage}}</div>
<input type="text" v-model="test">
<div>show something {{sth}}</div>
</div>
</template> <script>
export default {
name: 'A',
data () {
return {
message: '',
test: '',
sth: ''
}
},
// computed计算属性,它是依赖缓存的,换句话说,只要this.message不变化,那么this.reversedMessage会立即得出结果,不会重新进行this.message.split('').reverse().join('')运算
// 而如果是在methods中定义的,尽管this.message未发生变化,当再次调用reversedMessage()函数时,依然会重新计算一遍。
// 所以在大量的逻辑运算的情况下,使用computed是有必要的
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
},
// computed是计算属性(属性);watch监听器只要数据发生变化就会执行
// 大多数情况下,使用computed计算属性更好;watch监听器适合数据变化时执行异步操作或者开销较大的操作
watch: {
test () {
this.sth = this.test + ',hello'
}
} }
</script> <style lang="scss" scoped> </style>
代码如上图!
vue的计算属性computed和监听器watch的更多相关文章
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- vue 的计算属性computed自我理解
类型:{ [key: string]: Function | { get: Function, set: Function } } 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意, ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
随机推荐
- jvm领域优秀博主
dh5724 不过csdn iteye 博客园信息均被自己删除,只在一些问答中和引用中有部分信息. redcreen 对jvm有深入认知. RednaxelaFX oracle java 编译器开发者 ...
- 我的 FPGA 学习历程(02)—— 实验:点亮 LED 灯
关于 Quartus 的操作可以使用 Quartus 自带的帮助,帮助中带有全套的操作教程. 中文网络教程链接(链接至 altera中文官网,点击观看) Quartus II 软件设计系列:基础 Qu ...
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习3
#include <iostream>using namespace std;int main(){ double count=0; long double cleo=100; long ...
- 新浪实时股票数据接口http://hq.sinajs.cn/list=股票代码
股票数据的获取目前有如下两种方法可以获取: 1. http/JavaScript接口取数据 2. web-service接口 1.http/JavaScript接口取数据1.1Sina股票数据接口以大 ...
- 王燕 201771010126《面向对象程序设计(java)》第一周学习总结
王燕 201771010126<面向对象程序设计(java)>第一周学习总结 王燕 201771010126<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部 ...
- java学习之路--I/O流
java基础学习总结——流 一.JAVA流式输入/输出原理
- HC32F003与STM8S003资源对比,只是对比,大家评论~!
枯藤老树昏鸦小桥流水人家 古道西风瘦马夕阳西下断肠人在天涯 18年悄然过去!19年向我们走来,蓦然回首过 ...
- Web API Request Content多次读取
使用自宿主OWIN 项目中要做日志过滤器 新建类ApiLogAttribute 继承ActionFilterAttribute ApiLogAttribute : ActionFilterAttri ...
- tcpdump我的交叉编译(mips)
一.libpcap交叉编译 1.下载libpcap-1.8.1(http://www.tcpdump.org/) 2.解压 3.修改configure文件 a.注释掉 #if test -z &quo ...
- k8s-No.2-pod学习
本章目录 pod结构图 pod语法及参数说明 pod声明周期 一 pod结构图 大部分情况下,Openshift中的Pod只是容器的载体,通过Deployment.DaemonSet.RC.Job. ...