效果图

简易计算器.gif

知识点

  • 数据的热更新
  • switch的使用

    源码

    index.html

    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.   <title>Document</title>
    8.   <script src="../src/vue.js"></script>
    9. </head>
    10. <body>
    11.   <section id="app">
    12.       <input type="number" v-model.number.lazy='addend'>
    13.       <select v-model='type'>
    14.           <option>+</option>
    15.           <option>-</option>
    16.           <option>*</option>
    17.           <option>/</option>
    18.       </select>
    19.       <input type="number"v-model.number.lazy='augend' >
    20.       <button @click='sum'>=</button>
    21.       <input type="text" v-model='result'>
    22.   </section>
    23.   <script>
    24.       const vm = new Vue({
    25.           el:'#app',
    26.           data:{  
    27.               addend:0,
    28.               augend:0,
    29.               result:'',
    30.               type:'+'
    31.           },
    32.           methods:{
    33.               sum(){
    34.                   let addend = this.addend;
    35.                   let augend = this.augend;
    36.                   let type = this.type;
    37.                   switch (type){
    38.                       case '+':
    39.                           this.result = addend + augend;
    40.                           break;
    41.                       case '-':
    42.                           this.result = addend - augend;
    43.                           break;
    44.                       case '*':
    45.                           this.result = addend * augend;
    46.                           break;
    47.                       case '/':
    48.                           this.result = addend / augend;
    49.                           break;
    50.                   }
    51.               }
    52.           }
    53.       })
    54.   </script>
    55. </body>
    56. </html>

    其余代码

    简易计算器.rar