版权声明：本文为博主原创文章，转载请联系本人，未经博主允许不得转载 https://blog.csdn.net/stormdony/article/details/89107374
跟着Vue官网的教程学了一下，对Vue有了一个初步的了解，通过制作简单的计算器来练习一下，主要是通过switch判断。效果如下：
源码：
<!DOCTYPE html>
<html>
<head>
<title>practice_01</title>
</head>
<body>
<div id="app">
<h3>简单计算器</h3>
<input type="text" v-model.number="first">
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" v-model.number="two">
<input type="button" @click="equal" value="=">
<input type="text" v-model.number="three">
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
first: '', //第一个数
two: '', //第二个数
three: '', //结果
selected: "", //符号
},
methods: {
equal: function() {
switch(this.selected){
//使用switch来判断
case '0':
this.three = this.first + this.two
break;
case '1':
this.three = this.first - this.two
break;
case '2':
this.three = this.first * this.two
break;
case '3':
this.three = this.first / this.two
break;
}
}
}
})
</script>
</body>
</html>