网站优化 济南,住房和城乡建设部信息中心官网,江都建设银行网站,公司建网站会计分录通过一个案例#xff0c;循序渐进的了解计算属性#xff0c;这个案例通过不同的写法了解VUE的计算属性。
一、使用插值语法做一个示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewp…通过一个案例循序渐进的了解计算属性这个案例通过不同的写法了解VUE的计算属性。
一、使用插值语法做一个示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title姓名案例-插值语法/titlescript typetext/javascript src../js/vue.js/script
/head
bodydiv idroot姓:input typetext v-model:valuefirstnamebr/br/名:input typetext v-model:valuelastnamebr/br/全名span{{firstname}}-{{lastname}}/span/div
/body
script typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstname:李,lastname:国家,}})
/script
/html
二、 基于methods方法实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title姓名案例-methods实现/titlescript typetext/javascript src../js/vue.js/script/head
body!-- 准备好一个容器 --div idroot姓:input typetext v-model:valuefirstnamebr/br/名:input typetext v-model:valuelastnamebr/br/全名span{{fullName()}}/span/div
/body
script typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstname:李,lastname:国家,},methods:{//定义一个方法fullName(){return this.firstname - this.lastname}}})
/script
/html
三、 计算属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,},computed:{//完整写法/* fullName:{get(){console.log(get被调用了)return this.firstName - this.lastName},set(value){console.log(set,value)const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}} *///简写fullName(){console.log(get被调用了)return this.firstName - this.lastName}}})/script
/html
