效果展示
计算器
1.引入js
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
2.html部分
<body>
<div id="app">
<!--使用文本框输入数值,并使用v-model双向绑定-->
<input type="text" placeholder="" v-model="number1" />
<!--使用select定义列表 让运算符下拉-->
<select v-model="option">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" placeholder="" v-model="number2"/>
<!--value代表属性,用@click进行事件绑定实现点击-->
<input type="button" value="=" @click="xx"/>
<!--显示结果-->
<input type="text" v-model="result" />
</div>
</body>
3.实例化对象
<script>
var vm = new Vue({
el:"#app",
data:{
number1:"",
number2:"",
result:"0",
option:"+"//默认值
},
methods:{
xx(){
//使用switch分支语句
switch (this.option){
//计算结果
case"+":
this.result=parseInt(this.number1)+parseInt(this.number2)
break;
case"-":
this.result=parseInt(this.number1)-parseInt(this.number2)
break;
case"*":
this.result=parseInt(this.number1)*parseInt(this.number2)
break;
case"/":
this.result=parseInt(this.number1)/parseInt(this.number2)
break;
}
}
}
});
</script>