zoukankan      html  css  js  c++  java
  • 第二章 Vue快速入门--14 使用v-model实现计算器的案例

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4   <head>
     5     <meta charset="utf-8">
     6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>Document</title>
     9     <!--1.导入Vue的包-->
    10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>  
    11 
    12 
    13   </head>
    14 
    15   <body>
    16     <div id="app">
    17         <input type="text" v-model="n1">
    18 
    19         <select v-model="opt">
    20           <option value="+">+</option>
    21           <option value="-">-</option>
    22           <option value="*">*</option>
    23           <option value="/">/</option>
    24         </select>
    25         
    26         <input type="text" v-model="n2">
    27         <input type="button" value="=" @click="calc">
    28         <input type="text" v-model="result">
    29 
    30     </div>
    31 
    32       
    33 
    34 
    35       <script>
    36           //创建 Vue 实例,得到 ViewModel
    37           var vm =  new Vue({
    38               el:'#app',
    39         data:{
    40           n1:0,
    41           n2:0,
    42           result:0,
    43           opt:'+'
    44         },
    45         methods:{
    46           calc(){//计算器算数的方法
    47             //逻辑:
    48           /*  switch(this.opt){
    49               case '+':
    50                   this.result=parseInt(this.n1)+parseInt(this.n2)
    51                   break;
    52               case '-':
    53                   this.result=parseInt(this.n1)-parseInt(this.n2)
    54                   break;
    55               case '*':
    56                   this.result=parseInt(this.n1)*parseInt(this.n2)
    57                   break;
    58               case '/':
    59                   this.result=parseInt(this.n1)/parseInt(this.n2)
    60                   break;
    61             }*/
    62 
    63 
    64             //注意:这是投机取巧的方式,正式开发中,尽量少用
    65             var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
    66             this.result=eval(codeStr)
    67           }
    68         }
    69           });
    70 
    71       </script>
    72   </body>
    73 </html>
  • 相关阅读:
    Solr7.x学习(4)-导入数据
    Solr7.x学习(3)-创建core并使用分词器
    Solr7.x学习(2)-设置开机启动
    Solr7.x学习(1)-安装
    Java一个对象占用多少字节
    JConsole远程配置
    Docker方式安装SonarQube
    搭建Docker私有仓库
    委托
    MVC和WebApi中设置Area中的页为首页
  • 原文地址:https://www.cnblogs.com/songsongblue/p/10988125.html
Copyright © 2011-2022 走看看