专栏首页Micro_awake webVue学习3:计算属性computed与监听器

Vue学习3:计算属性computed与监听器

下面是计算属性相关代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue3</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <!--计算属性computed,可以用在一些复杂逻辑上-->
12 <div id="app">
13     <!--1.模板中逻辑过重,不易维护-->
14     <p>{{msg.split('').reverse().join('')}}</p><br>
15     <!--2.用上computed属性,适用于复杂逻辑-->
16     <p>原值:{{msg}}</p>
17     <p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br>
18     <!--3.用methods-->
19     <p>原值:{{msg}}</p>
20     <p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br>
21     <!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖(例子中指vm.msg),
22     只有相关依赖改变才会重新取值;但是methods,每次重新渲染时,都会重新取值-->
23     <!--所以说一般computed性能更好-->
24 
25 
26     <!--计算属性默认只有getter,不过我们可以设置setter-->
27     <p>{{fullName}}</p>
28     <p>{{firstName}}</p>
29     <p>{{lastName}}</p>
30 </div>
31 
32 <script>
33     var vm=new Vue({
34         el: '#app',
35         //选项对象
36         data:{
37             msg:'hello',
38             firstName:'Smith',
39             lastName: 'Lee'
40         },
41         //声明计算属性,提供的函数将用作vm.reverseMsg的getter
42         //vm.reverseMsg依赖于vm.msg;vm.msg改变时,vm.reverseMsg也会改变
43         computed:{
44             //计算属性的getter
45             reverseMsg:function(){
46                 return this.msg.split('').reverse().join('');
47             },
48             fullName:{
49                 get:function(){
50                     return this.firstName+' '+this.lastName;
51                 },
52                 set:function(newValue){
53                     var value=newValue.split(' ');
54                     this.firstName=value[0];
55                     this.lastName=value[1];
56                 }
57             }
58 
59         },
60         methods:{
61            reverseMsg1:function(){
62               return this.msg.split('').reverse().join('');
63            }
64         }
65     });
66     vm.fullName='John Lee';
67 </script>
68 </body>
69 </html>

2.下面是监听器相关代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue4 监听属性</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     <input type="text" v-model="meter">
13     <input type="text" v-model="kilometer">
14     <p class="test"></p>
15 </div>
16 <!--其实计算属性在大多数时候更合适,但是当数据执行异步操作或开销较大的操作时,需要采用监听器操作-->
17 <script>
18     var vm=new Vue({
19         el: '#app',
20         data:{
21             meter:'',
22             kilometer: ''
23         },
24         watch:{
25             //watch创建了meter和kilometer两个方法
26             meter:function(val){
27                 this.meter=val;
28                 this.kilometer=val/1000;
29             },
30             kilometer:function(val){
31                 this.kilometer=val;
32                 this.meter=val*1000;
33             }
34         },
35 
36 
37     });
38     vm.$watch('meter',function(newValue,oldValue){
39         document.getElementsByClassName('test')[0].innerHTML="meter新值:"+newValue+ ";" + "meter旧值:"+oldValue;
40     })
41 </script>
42 </body>
43 </html>

在第一个输入框中输入123后,运行结果:

参考:https://cn.vuejs.org/v2/guide/http://www.runoob.com/vue2

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue生命周期钩子函数

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

    用户1149564
  • JQuery基础

    学习jQuery的时候,很快过了一遍,发现好多知识点不清晰。看来还是要写出来加深印象,平时多练习! jQuery是一个Javascript函数库,轻量级,“写得...

    用户1149564
  • es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

    1.函数可以设置参数默认值 1 function test1(x,y=1){ 2 console.log(x,y) 3 } 4 te...

    用户1149564
  • 如何写一篇合格的NLP论文?

    本文题目取“合格”的论文,而不是优美的论文,或精彩的论文。一个原因是,我自知英文水平特别是词汇有限,从未写过自认精彩或优美的论文,并无资格提供这方面的建议。另一...

    磐创AI
  • 清华大学刘知远:如何写一篇合格的NLP论文

    前几天刚过完 ACL 2019 投稿季,给不少同学的论文提供了修改建议。其中很多论文,特别是初学者的论文的问题都很相似。一想到未来还要给更多新同学重复这些话,决...

    机器之心
  • 清华NLP实验室刘知远:如何写一篇合格的NLP论文

    本文作者刘知远为清华大学计算机科学与技术系副教授 。刘老师总结了研究者在写NLP论文时常见的几类问题,并写成了这篇文章。除了对于NLP研究者,这篇文章对于其他的...

    大数据文摘
  • Laravel5.3之Container源码解析

    说明:本文主要学习Laravel中Container的源码,主要学习Container的绑定和解析过程,和解析过程中的依赖解决。分享自己的研究心得,希望对别人有...

    botkenni
  • 手把手教你打造 SDN 网路 (二) (安装准备)

    在安装完 Vagrant 和 Virtualbox 就可以开始进行,如果用的是 Windows 建议可以下载 Cmder 这个 Console Emulator...

    腾讯云TStack
  • 刷新CoQA榜单记录:基于对抗训练和知识蒸馏的机器阅读理解方案解析

    一直以来,机器阅读理解都是自然语言处理界最受关注、进步最快的技术方向之一,主要有两大比赛较受瞩目,分别是注重一问一答的SQuAD [2]和多轮对话问答的CoQA...

    机器之心
  • 追一科技CoQA冠军方案分享:基于对抗训练和知识蒸馏的机器阅读理解方案

    近日,在由斯坦福大学发起的对话式问答挑战赛 CoQA (Conversational Question Answering Challenge)中,追一科技AI...

    AI研习社

扫码关注云+社区

领取腾讯云代金券