网上做网站网站代理,seo是什么的简称,关于网站首页建设的文章,ppt怎么做文章目录一、基础计算模板二、计算属性computed三、方法methods四、侦听器watch五、总结六、源码地址一、基础计算模板
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器/title!--引入vue.js库--script src../vue.js/script
/headbody
div idroot{{firstName lastName}}
/divscriptvar vm new Vue({el: #root,data: {firstName: gb,lastName: lfy}});
/script
/body
/html
升级一下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器/title!--引入vue.js库--script src../vue.js/script
/headbody
div idroot{{firstName lastName}}
/divscriptvar vm new Vue({el: #root,data: {firstName: gb,lastName: lfy},//计算属性computed: {fallName: function () {return this.firstName this.lastName;}}});
/script
/body
/html
二、计算属性computed
有缓存机制会用以前计算的结果 当计算的属性发生变化时会执行一次当修改的数据不属于计算属性时会从缓存中查询不会执行。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器/title!--引入vue.js库--script src../vue.js/script
/headbody
div idroot{{fullName}}{{age}}
/divscriptvar vm new Vue({el: #root,data: {firstName: gb,lastName: lfy,age: 22},//计算属性computed: {fullName: function () {console.log(计算了一次)return this.firstName this.lastName;}}});
/script
/body
/html 三、方法methods
无缓存机制不管修改什么输入都会执行一次
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器/title!--引入vue.js库--script src../vue.js/script
/headbody
div idroot{{fullName()}}{{age}}
/divscriptvar vm new Vue({el: #root,data: {firstName: gb,lastName: lfy,age: 22},methods: {fullName: function () {console.log(计算了一次)return this.firstName this.lastName;}}});
/script
/body
/html 四、侦听器watch
和计算属性一样有缓存机制只要我侦听的数据不发生改变我就不会执行
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue计算属性、方法、侦听器/title!--引入vue.js库--script src../vue.js/script
/headbody
div idroot{{fullName()}}{{age}}
/divscriptvar vm new Vue({el: #root,data: {firstName: gb,lastName: lfy,fullName: gb lfy,age: 22},watch: {firstName: function () {console.log(计算了一次);this.firstName this.lastName;},lastName: function () {console.log(计算了一次);this.firstName this.lastName;},}});
/script
/body
/html
五、总结
如果一个功能既可以用计算属性、方法、侦听器实现建议优先选择计算属性
六、源码地址
