vue学习10-计算属性
计算属性
1 DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <script src='https://unpkg.com/vue/dist/vue.js'>script> 8 <title>title> 9 head> 10 <body> 11 <div id='app'> 12 <div> 13 <label>宽：label> 14 <input type="text" v-model:value="widht"> 15 div> 16 <div> 17 <label>高：label> 18 <input type="text" v-model:value="height"> 19 div> 20 <div>面积：{{area}}div> 21 22 23 24 div> 25 <script> 26 new Vue({ 27 el:'#app', 28 data:{ 29 widht:0, 30 height:0 31 }, 32 computed:{ 33 area(){ 34 return this.widht * this.height 35 } 36 } 37 } 38 39 40 ) 41 script> 42 body> 43 html>