2_3 Vue 计算属性,方法监听
2020-06-11 04:37
62 查看
Vue 计算属性,方法监听
[code]<!DOCTYPE html> <html> <head> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> {{fullName}} </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ firstName:'zhang', lastName:'xue' }, //计算属性:有缓存机制 computed:{ fullName:function(){ return this.firstName + ' ' + this.lastName; } } }) </script> </body> </html>
[code]<!DOCTYPE html> <html> <head> <title>方法</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> {{fullName()}} </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ firstName:'zhang', lastName:'xue' }, //方法:无缓存机制,性能不佳 methods:{ fullName:function(){ return this.firstName+' '+this.lastName; } } }) </script> </body> </html>
[code]<!DOCTYPE html> <html> <head> <title>监听</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> {{fullName}} </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ firstName:'zhang', lastName:'xue', fullName:'zhnag xue' }, //监听 watch:{ firstName:function(){ this.fullName=this.firstName+ ' ' + this.lastName; }, lastName:function(){ this.lastName=this.firstName+ ' '+ this.lastName; } } }) </script> </body> </html>
相关文章推荐
- Vue学习:计算属性,方法,侦听器
- vue中的计算属性的使用和vue实例的方法示例
- Vue中使用方法、计算属性或观察者的方法实例详解
- vue-计算属性和方法
- Vue计算属性vs方法
- Vue 方法与计算属性
- Vue:计算属性和方法的区别和watch监听器的使用
- vue中计算属性与方法的不同之缓存
- 关闭Vue计算属性自带的缓存功能方法
- Vue中的计算属性和监听属性
- Vue使用watch监听一个对象中的属性的实现方法
- 详解vue2.0监听属性的使用心得及搭配计算属性的使用
- Vue框架-基础知识(vue指令、实例生命周期、计算属性与监听属性、插槽理解、组件介绍、数据交互、ES6语法等)
- 详解vue 计算属性与方法跟侦听器区别(面试考点)
- Vue第五天 Vue的模板语法,计算属性,方法,侦听器
- vue 更改计算属性后select选中值不更改的解决方法
- Vue中使用方法、计算属性或观察者的方法实例详解
- 自学Vue必看的计算属性知识总结以及计算属性与方法的区别
- vue 计算属性computed和观察watch 和方法methods
- (简)vue的methods(方法)+watch(监听属性)