老师怎么简化watch中的函数,能不能复用methods中的函数

来源:3-23 自由编程

松_松

2020-09-14 09:46:39

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>计算器</title>
   <style>
       #app{
           padding-top: 300px;
           padding-left: 500px;
       }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <input type="text" v-model.number="num1">
       <select v-model="fuhao">
           <option>+</option>
           <option>-</option>
           <option>*</option>
           <option>/</option>
       </select>
       <input type="text" v-model.number="num2">
       <button @click="js">=</button>
       <input type="text" v-model.number="jg">
   </div>
   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               num1:'',
               fuhao:'+',
               num2:'',
               jg:"",
           },
           methods:{
               js: function () {
                   switch (this.fuhao) {
                       case "+":
                           this.jg=this.num1+this.num2;
                           break;
                       case "-":
                           this.jg=this.num1-this.num2;
                           break;
                       case "*":
                           this.jg=this.num1*this.num2;
                           break;
                       case "/":
                           this.jg=this.num1/this.num2;
                           break;

                   }
               }
           },
           watch:{
               fuhao :function () {
                   switch (this.fuhao) {
                       case "+":
                           this.jg=this.num1+this.num2;
                           break;
                       case "-":
                           this.jg=this.num1-this.num2;
                           break;
                       case "*":
                           this.jg=this.num1*this.num2;
                           break;
                       case "/":
                           this.jg=this.num1/this.num2;
                           break;

                   }
               }
           }
       });

   </script>
</body>
</html>

写回答

1回答

好帮手慕慕子

2020-09-14

同学你好,可以复用的,参考下图示例:在methods中定义一个公共的方法,然后在点击事件和watch中调用这个方法就可以了。

http://img.mukewang.com/climg/5f5f03e509ca581508410765.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 10739 问题

查看课程