Vue语法学习第三课—

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。

<div id="example"><p>original message : "{{message}}"</p><p>computed reversed message : "{{reverseMessage}}"</p></div><script>var vm = new Vue({el:"#example",data:{message : "zxq"},computed : {reverseMessage : function(){return this.message.split('').reverse().join('');}}});</script>

同样的效果也可以通过在表达式中调用methods实现。

注：计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，计算属性才会重新求值。

如上示例，只有当message改变时，多次访问 reverseMessage 计算属性才会再次执行函数，否则会返回之前的结果。

而对比methods，总是会再次执行函数。

computed 和 watch

<div id="app0">firstname : <input type="text" v-model="firstName"/><br/>lastname  : <input type="text" v-model="lastName"/><p>my name is : {{fullName}}</p>
</div>

① watch

　　　　var vm = new Vue({el: '#app0',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}})

② computed

　　　　 var vm = new Vue({el: '#app0',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}})

相比之下，计算属性更为简洁

计算属性默认只有get方法，但在必要时也可以提供一个set方法

　　<div id="example">firstname     :     <input type="text" v-model="firstName"/><br/>lastname      :     <input type="text" v-model="lastName"/><br/>my name is 　 :    　<input v-model="fullName" /></div><script>var vm = new Vue({el:"#example",data: {firstName: 'zhu',lastName: 'xingqing'},computed : {fullName : {get : function(){return this.firstName + ' ' + this.lastName},set : function(newVal){newfull = newVal.split(' ');this.firstName = newfull[0];this.lastName = newfull[1];}}}});</script>

转载于:https://www.cnblogs.com/zhuxingqing/p/10502052.html

Vue语法学习第三课——计算属性相关推荐

vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
Python学习第三课-基本数据类型
Python学习第三课-基本数据类型一.基本概念 1.1表达式 1.2语句 1.3程序 1.4函数内置函数自定义函数参数返回值二.标识符 2.1 关键字 2.2标识符概念驼峰命名法下划 ...
JavaScript学习第三课（三）
JavaScript学习第三课(三) 学习内容一.日期和时间对象二.日期和对象常用的方法三.修改日期和对象常用的方法四.将日期和时间转化为字符串五.日期时间对象的比较一.日期和时间对象 ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
语法基础（三. 类，属性，方法，方法重载，方法重写，构造方法，访问修饰符）
语法基础(三. 类,属性,方法,方法重载,方法重写,构造方法,访问修饰符) (如有错误,欢迎指正,感谢!) 类类是面向对象的程序设计中的概念,实现信息的封装概念: 类就是拥有相等行为和相同的属性的 ...
Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录导言一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
4.vue基础（三）计算属性-监视（侦听）属性
文章目录 1. 计算属性 1.1 插值语法实现姓名案例 1.2 methods实现 1.3 计算属性实现 2.监视(侦听)属性 2.1 天气案例 2.2 利用监听属性 2.3 深度监听 2.3.1 监 ...
Vue学习笔记之04-computed计算属性
计算属性 computed 什么是计算属性, 在某些情况下, 需要将数据先进行转化后再进行显示, 或者需要将多个数据结合后再进行显示, 那么就需要将属性进行处理, 这就叫做计算属性在进行变量的操作的 ...

Vue语法学习第三课——计算属性

Vue语法学习第三课——计算属性相关推荐

最新文章

热门文章