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>
巴特西

vue学习10-计算属性

最新文章

热门文章
