Vue.js学习（二）：computed响应数据变化与其他几种方法的比较

迷南。 2022-06-02 05:24 286阅读 0赞

vue重methods、computed、watch以及v-model都能侦听数据，并相应数据的变化

1）methods：每次获取都会重新计算求值

<div id="app"> <label for="firstName">First Name:</label> <input type="text" id="firstName" v-model="first" @keypress="change"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" v-model="last" @keypress="change"> <h2>methods: { {name}}</h2> </div>

let vm=new Vue({ el:'#app', data:{ price: 1 }, methods:{ change(){ this.price } } })

2）computed：基于数据依赖进行缓存，只有当数据变化时，才会重新求值；

<div id="app"> <label for="firstName">First Name:</label> <input type="text" id="firstName" v-model="first"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" v-model="last"> <h2>computed: { {cap}}</h2> </div>

let vm=new Vue({ el:'#app', data:{ first:'', last: "", name:"" }, computed:{ cap:function(){ return this.first+" "+this.last } } })

3）watch：当需要在数据变化时执行异步或者开销较大的操作时，这个方式最有用；

<div id="app"> <label for="firstName">First Name:</label> <input type="text" id="firstName" v-model="first"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" v-model="last"> <h2>watch: { {cap}}</h2> </div>

let vm=new Vue({ el:'#app', data:{ first:'', last: "", name:"" }, watch:{ first(value){ this.name=value+' '+this.last }, last(value){ this.name=this.first+" "+value } } })

4）v-model：这是基于数据双向绑定的

<div id="app"> <label for="firstName">First Name:</label> <input type="text" id="firstName" v-model="first"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" v-model="last"> <h2>v-model：{ {first+' '+last}}</h2> </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关 java比较日期大小的几种方法

1. Date.compareTo() java.util.Date提供了在Java中比较两个日期的经典方法compareTo()。如果两个日期相等，则返回值为0。如

妖狐艹你老母/ 2023年10月10日 21:17/ 0 赞/ 13 阅读

相关 Java比较日期大小的几种方法

> 例子： > String beginTime=new String(“2017-06-09 10:22:22”); > String endTime=new Str

逃离我推掉我的手/ 2022年12月27日 08:24/ 0 赞/ 199 阅读

相关 Vue 动态响应数据变化

Vue实践分享（二） Vue是MVVM模式，即Model-View-ViewModel，通过绑定数据即可以实时改变视图显示。比如：使用v-blink动态绑定属性

我会带着你远行/ 2022年07月11日 05:37/ 0 赞/ 129 阅读

相关 comparaTo（）几种常见的数据类型比较

几种常见的数据类型的比较方式 1.整数，小数 Integer Float Double 直接比较基本数据类型的大小 2.字符：比较的unicode 码之差 3.字符

我就是我/ 2022年06月02日 08:37/ 0 赞/ 176 阅读

相关 Vue.js学习（二）：computed响应数据变化与其他几种方法的比较

vue重methods、computed、watch以及v-model都能侦听数据，并相应数据的变化 1）methods：每次获取都会重新计算求值 <div

迷南。/ 2022年06月02日 05:24/ 0 赞/ 287 阅读

相关【VueJS】深入理解 computed 和 methods 方法

前言　　模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example">

╰+攻爆jí腚メ/ 2022年06月02日 04:07/ 0 赞/ 405 阅读

相关 VueJs 监听 window.resize 方法---窗口变化

> Vuejs 本身就是一个 MVVM 的框架。 > > 但是在监听 window 上的事件时，往往会显得力不从心。 > > 比如这次是 window

た入场券/ 2022年05月21日 06:44/ 0 赞/ 312 阅读

相关几种任务调度的 Java 实现方法与比较

综观目前的 Web 应用，多数应用都具备任务调度的功能。本文由浅入深介绍了几种任务调度的 Java 实现方法，包括 Timer，Scheduler, Quartz 以及 JCr

约定不等于承诺〃/ 2022年05月16日 03:24/ 0 赞/ 202 阅读

相关几种任务调度的 Java 实现方法与比较

前言任务调度是指基于给定时间点，给定时间间隔或者给定执行次数自动执行任务。本文由浅入深介绍四种任务调度的 Java 实现： Timer Scheduled

小咪咪/ 2022年05月08日 09:20/ 0 赞/ 242 阅读

相关几种任务调度的 Java 实现方法与比较

[张静][Link 1] , 软件工程师, IBM [王启荣][Link 2] , 软件工程师, IBM 简介：综观目前的 Web 应用，多数应用都具备任务调度的功

Love The Way You Lie/ 2022年04月16日 06:47/ 0 赞/ 182 阅读