首页 > 其他 > 详细

vue--简易计算器的使用

时间:2019-05-19 15:43:02      阅读:111      评论:0      收藏:0      [点我收藏+]
 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>简易计算器的使用</title>
 8     <script src="../js/vue.js"></script>
 9 </head>
10 
11 <body>
12 
13     <div id="app">
14         <input type="text" v-model="n1">
15         <select v-model=‘opt‘>
16             <option value="+">+</option>
17             <option value="-">-</option>
18             <option value="*">*</option>
19             <option value="/">/</option>
20         </select>
21         <input type="text" v-model="n2">
22         <button @click="clac">=</button>
23         <input type="text" v-model="result">
24 
25     </div>
26     <script>
27         var vm = new Vue({
28             el: #app,
29             data: {
30                 n1: 0,
31                 n2: 0,
32                 opt: +,
33                 result: 0,
34 
35             },
36             methods: {
37                 clac() {
38                     // switch (this.opt) {
39                     //     case ‘+‘:
40                     //         this.result = parseInt(this.n1) + parseInt(this.n2)
41                     //         break;
42                     //     case ‘-‘:
43                     //         this.result = parseInt(this.n1) - parseInt(this.n2)
44                     //         break;
45                     //     case ‘*‘:
46                     //         this.result = parseInt(this.n1) * parseInt(this.n2)
47                     //         break;
48                     //     case ‘/‘:
49                     //         this.result = parseInt(this.n1) / parseInt(this.n2)
50                     //         break;
51                     // }
52                     let setCode=parseInt(this.n1)+ this.opt+parseInt(this.n2)
53                     this.result=eval(setCode)
54                 }
55             }
56         })
57     </script>
58 </body>
59 
60 </html>

 

vue--简易计算器的使用

原文:https://www.cnblogs.com/yuanxiangguang/p/10889416.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!