<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡易計算器</title> <script src="./lib/vue.js"></script></head><body><div id="app"> <input type="text" v-model="num1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="num2"> <input type="button" value="=" @click="cal"> <input type="text" v-model="result"></div><script> var vm = new Vue({ el:"#app", data:{ num1:0, num2:0, result:0, opt:"+" }, methods:{ cal(){ switch (this.opt) { case "+": this.result = parseInt(this.num1) + parseInt(this.num2) break; case "-": this.result = parseInt(this.num1) - parseInt(this.num2) break; case "*": this.result = parseInt(this.num1) * parseInt(this.num2) break; case "/": this.result = parseInt(this.num1) / parseInt(this.num2) break; } } } })</script></body></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/39046.html
標籤：HTML5
上一篇：XPath匹配標簽使用text()判斷獲取結果失敗/為空的問題及解決方法
下一篇：使用webgl(three.js)搭建3D智慧園區、3D大屏，3D樓宇，智慧燈桿三維展示，3D燈桿，web版3D,bim管理系統——第六課