<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>methods</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2"> <button @click="fangfa">计算</button> <br/> <input type="text" v-model="result"> </div> <script> var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, opt: '+', result: 0 }, methods: { fangfa() { switch (this.opt) { case '+': this.result = Number(this.n1) + Number(this.n2); break; case '-': this.result = Number(this.n1) - Number(this.n2); break; case '*': this.result = Number(this.n1) * Number(this.n2); break; case '/': this.result = Number(this.n1) / Number(this.n2); break; } } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>computed</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input id="input" type="text" v-model="n1"/> <select v-model="opt"> <option value ="+">+</option> <option value ="-">-</option> <option value ="*">*</option> <option value ="/">/</option> </select> <input type="text" v-model="n2"/> <input type="text" v-model="result"/> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ n1:0, n2:0, opt:'+' }, computed:{ result(){ switch (this.opt) { case '+': return Number(this.n1) + Number(this.n2); break; case '-': return Number(this.n1) - Number(this.n2); break; case '*': return Number(this.n1) * Number(this.n2); break; case '/': return Number(this.n1) / Number(this.n2); break; } } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model.number="number1"/> <select v-model="opt"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" v-model.number="number2" /> <br /> <div> <p v-if="opt=='+'">结果:{{number1+number2}}</p> <p v-if="opt=='-'">结果:{{number1-number2}}</p> <p v-if="opt=='*'">结果:{{number1*number2}}</p> <p v-if="opt=='/'">结果:{{number1/number2}}</p> </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ number1:0, number2:0, opt:"*" } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>watch</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input id="input" type="text" v-model="n1" /> <select v-model="opt"> <option value ="+">+</option> <option value ="-">-</option> <option value ="*">*</option> <option value ="/">/</option> </select> <input type="text" v-model="n2" /> <input type="text" v-model="result" /> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ n1:0, n2:0, result:null, opt:'+' }, methods:{ watch1(){ switch (this.opt) { case '+': this.result = Number(this.n1) + Number(this.n2); break; case '-': this.result = Number(this.n1) - Number(this.n2); break; case '*': this.result = Number(this.n1) * Number(this.n2); break; case '/': this.result = Number(this.n1) / Number(this.n2); break; } } }, watch:{ n1:function(){ this.watch1() }, n2:function(){ this.watch1() }, opt:function(){ this.watch1() } }, created(){ this.watch1() } }) </script> </body> </html>
标签:case,vue,Number,break,result,计算器,n1,n2 From: https://www.cnblogs.com/Gura/p/17280581.html