专栏首页Micro_awake webvue的计算属性computed和监听器watch

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 条评论
登录 后参与评论

相关文章

  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • vue生命周期钩子函数

    1. created与mounted都常见于ajax请求,前者如果请求响应时间过长,容易白屏

    用户1149564
  • Vue学习4:class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用。所以可能阅读性不是那么强。如果有参考我这类博客的人,那么请见谅。

    用户1149564
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥
  • 手把手教你用Python处理非平稳时间序列(附代码)

    预测一个家庭未来三个月的用电量,估计特定时期道路上的交通流量,预测一只股票在纽约证券交易所交易的价格……这些问题都有什么共同点?

    数据派THU
  • React事件绑定几种方法测试

    mcq
  • 不想得手指关节炎?帮你提炼IDEA常用代码补全操作

    输入args.for回车(args是一个数组或集合类),则会生成for循环遍历:

    字母哥博客
  • 在React应用程序中用RegEx测试密码强度

    尽管一些组织认为应该由用户选择健壮的用户名和密码来保护自己,但是开发人员可以通过将规则包含在程序的设计中来帮助进行良好的密码选择。例如,开发人员可以通过加入进度...

    疯狂的技术宅
  • 人工智能应用范围那么广,但融资最多的还是医疗卫生

    李杉 编译自 cbinsights 量子位 报道 | 公众号 QbitAI ? 从互联网金融到网络安全,从教育科技到广告服务,人工智能已经应用到各个行业。值得注...

    量子位
  • HDU 1693 Eat the Trees 插头DP入门

    终于该来的还是得来~ 插头DP入门学习! HDU 1693 Eat the Trees

    ACM算法日常

扫码关注云+社区

领取腾讯云代金券