vue的计算属性computed和监听器watch

 1 <template>
 2     <div>
 3       this is A.vue <br>
 4       <!--计算属性-->
 5       <label for="msg">输入message:</label>
 6       <input type="text" v-model="message" id="msg">
 7       <div>this is the reversedMessage: {{reversedMessage}}</div>
 8       <input type="text" v-model="test">
 9       <div>show something {{sth}}</div>
10     </div>
11 </template>
12 
13 <script>
14 export default {
15   name: 'A',
16   data () {
17     return {
18       message: '',
19       test: '',
20       sth: ''
21     }
22   },
23   // computed计算属性,它是依赖缓存的,换句话说,只要this.message不变化,那么this.reversedMessage会立即得出结果,不会重新进行this.message.split('').reverse().join('')运算
24   // 而如果是在methods中定义的,尽管this.message未发生变化,当再次调用reversedMessage()函数时,依然会重新计算一遍。
25   // 所以在大量的逻辑运算的情况下,使用computed是有必要的
26   computed: {
27     reversedMessage () {
28       return this.message.split('').reverse().join('')
29     }
30   },
31   // computed是计算属性(属性);watch监听器只要数据发生变化就会执行
32   // 大多数情况下,使用computed计算属性更好;watch监听器适合数据变化时执行异步操作或者开销较大的操作
33   watch: {
34     test () {
35       this.sth = this.test + ',hello'
36     }
37   }
38 
39 }
40 </script>
41 
42 <style lang="scss" scoped>
43 
44 </style>

代码如上图!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三木的博客

Linux shell 程序设计4——shell变量

1、shell变量没有类型,所有变量都被当作字符串来处理。 2、shell变量的命名和c语言相同。 3、shell变量赋值和c语言略有不同,shell赋值要求等...

2266
来自专栏云飞学编程

Python基础之常用格式化输出字符详解

写代码的时候经常会遇到使用格式化字符的情况,这里将常用的三种情况:%s、%d和%f 用代码给大家详细说明下:

1101
来自专栏C语言及其他语言

【优秀题解】问题 1678: 算法2-18~2-19:双向循环链表

第一步:(这一步千万不要倒过来 否则会出错)先把p->next元素(用x 元素代替),

993
来自专栏从零开始学自动化测试

python笔记30-docstring注释添加变量

python里面添加字符串注释非常简单,如何将变量放入 python 的函数注释里面呢?docstring也就是给代码加注释的内容了,python可以给函数,类...

3182
来自专栏编码前线

Java动态代理

上面ClassA是委托类,ClassB是代理类,ClassB中的函数直接调用ClassA中相应的函数,并隐藏了ClassA的method3()函数。

1654
来自专栏Laoqi's Linux运维专列

文件的遍历

1423
来自专栏chenssy

多线程:为什么在while循环中加入System.out.println,线程可以停止

这个我们都知道,由于 stopReqested 的更新值在主内存中,而线程栈中的值不是最新的,所以会一直循环,线程并不能停止。加上 Volatile 关键字后,...

1674
来自专栏技术博客

菜菜从零学习WCF六(数据协定)

  --默认情况下,Windows Communication Foundation(WCF)使用称为数据协定序列化程序的序列化引擎对数据进行序列化和反序列化(...

531
来自专栏深度学习之tensorflow实战篇

python 序列化数据:pickle与json ,dumps与loads

python 序列化数据:pickle与json pickle 只能在python中用python文件间序列化,实现了两个python 内存数据的交互(可序列...

3686
来自专栏pangguoming

Vue实现对数组、对象的深拷贝、复制

当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组:...

5516

扫码关注云+社区

领取腾讯云代金券