05-v-model简易计算器

最新推荐文章于 2021-11-10 09:21:51 发布

wahaha-me

最新推荐文章于 2021-11-10 09:21:51 发布

阅读量209

点赞数

分类专栏： vue学习文章标签：计算器

vue学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

05-
v-model简易计算器

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="n1">
    <select name="" id="" v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">


    <input type="button" value="=" @click="jisuan">



    <input type="text" v-model="result">
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data(){
      return {
        n1:0,
        n2:0,
        result:0,
        opt:'+'
      }
    },
    methods: {
      jisuan(){
        // switch (this.opt) {
        //   case '+':
        //     this.result=parseInt(this.n1)+parseInt(this.n2)
        //     break;
        //   case '-':
        //     this.result=parseInt(this.n1)-parseInt(this.n2)
        //     break;
        //   case '*':
        //     this.result=parseInt(this.n1)*parseInt(this.n2)
        //     break;
        // }
        var res=parseInt(this.n1)+this.opt+parseInt(this.n2)
        this.result=eval(res)
      }
    }
  })
</script>
</body>
</html>