<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.min-v2.5.16.js"></script> <title>Document</title> </head> <body> <div id="app"> <form action=""></form> <input type="text" v-model="a"> <select v-model="jjcc"> <option value="0" >+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">/</option> </select> <input type="text" v-model="b"> <button v-mdoel="jjcc"@click="fun()">=</button> <input type="text" v-model="result"> <button type="reset">重置</button> </form> </div> <script> new Vue({ el:'#app', data:{ a:null, b:null, jjcc:null, result:null, }, methods:{ fun(){ switch(this.jjcc){ case '0': this.result=parseInt(this.a)+parseInt(this.b); break; case '1':this.result=parseInt(this.a)-parseInt(this.b); break; case '2':this.result=parseInt(this.a)*parseInt(this.b); break; case '3':this.result=parseInt(this.a)/parseInt(this.b); break; default: alert('请输入正确的数字'); break; } } } }); </script> </body> </html>
需要注意html不会报错,所以编译代码时要注意代码正确性,switch的用法,和script里面的引号要用单引号