05简单案例实现计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span>请输入第一个数据</span><input type="text" name="" id="" v-model="firstNumber"> <select v-model="optionType"> <option value='+'>+</option> <option value='-'>-</option> <option value='*'>*</option> <option value='/'>/</option> </select> <span>请输入第二个数据</span><input type="text" name="" id="" v-model="lastNumber"> <button @click="handerSum">计算</button><br> <span>结果{{sumNumber}}</span> </div> <script> var vm=new Vue({ el : '#app', data:{ firstNumber:0, lastNumber:0, optionType:"+", sumNumber:0 },methods: { handerSum(){ switch(this.optionType){ case "+": this.sumNumber=parseInt(this.firstNumber)+parseInt(this.lastNumber); break; case "-": this.sumNumber=parseInt(this.firstNumber)-parseInt(this.lastNumber); break; case '*': this.sumNumber=parseInt(this.firstNumber)*parseInt(this.lastNumber); break; case '/': this.sumNumber=parseInt(this.firstNumber)/parseInt(this.lastNumber); break; } } }, }) </script> </body> </html>
所需依赖：npm i vue
浙公网安备 33010602011771号