- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="x-ua-compatible" content="IE=edge">
- <title>
- Title
- </title>
- <script src="js/vue-2.4.0.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">
- <input type="button" value="=" @click="calc">
- <input type="text" v-model="result">
- </div>
- <script>
- const vm = new Vue({
- el: '#app',
- data: {
- n1: 0,
- n2: 0,
- opt: '+',
- result: 0,
- },
- methods: {
- calc() { // 计算器算数的方法
- // 逻辑
- switch (this.opt) {
- case '+':
- this.result = parseInt(this.n1) + parseInt(this.n2);
- break;
- case '-':
- this.result = parseInt(this.n1) - parseInt(this.n2);
- break;
- case '*':
- this.result = parseInt(this.n1) * parseInt(this.n2);
- break;
- case '/':
- this.result = parseInt(this.n1) / parseInt(this.n2);
- break;
- }
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2967974.html