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>

 

posted @ 2021-12-28 14:38  空谷近心  阅读(32)  评论(0)    收藏  举报