标签：function Vue vars 实现 value 计算器 var input
<head>
<meta charset="UTF-8">
<title>计算器</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../vue.js"></script>
</head>
<!-- input框中内容从右边显示 -->
<style>
input{
width: 327px;
height: 80px;
font-size: 50px;
text-align: right;
}
button{
width: 80px;
height: 80px;
}
</style>
<body>
<!-- 设置输入框的长度和大小 -->
<div id="root" class="root">
<input id="inputs" type="text" placeholder="0" disabled="disabled" v-model="zhi">
<!-- 设置按键的宽和高 -->
<div id="forcat" >
<button @click="cls()" >AC</button>
<button @click="zhengfu('')" >+/-</button>
<button @click="tuige()" >⬅</button>
<button @click="addStr('/')" >÷</button><br>
<button @click="addStr(7)" >7</button>
<button @click="addStr(8)" >8</button>
<button @click="addStr(9)" >9</button>
<button @click="addStr('*')">×</button><br>
<button @click="addStr(4)" >4</button>
<button @click="addStr(5)" >5</button>
<button @click="addStr(6)" >6</button>
<button @click="addStr('-')" >-</button><br>
<button @click="addStr(1)" >1</button>
<button @click="addStr(2)" >2</button>
<button @click="addStr(3)" >3</button>
<button @click="addStr('+')" >+</button><br>
<button @click="addStr(0)" style="width: 165px; height: 80px;" >0</button>
<button @click="addStr('.')" >.</button>
<button @click="calc()" style="background-color:cornflowerblue;" >=</button>
</div>
</div>
<script type="text/javascript">
// 这两行代码可以略过（Vue中的配置，不一定每个人都要）
Vue.config.productionTip = false;
Vue.config.devtools = true;
new Vue({
el:'#root',
data:{
zhi:"",
},
methods:{
// 在这里也可以直接使用this.
// 在input框内可以输入值
addStr:function(s){
var vars = document.getElementById("inputs");
vars.value = vars.value + s;
},
// 计算input框内输入的值计算加减乘除
calc:function(){
var vars = document.getElementById("inputs");
val = eval（vars.value);
vars.value = val;
},
// input框内删减，退格
tuige:function(){
this.zhi = this.zhi.substr(0,this.zhi.length-1);
},
// 清除input框中的内容
cls:function(){
var vars = document.getElementById("inputs");
vars.value = "";
},
// 每次点击正负值都会 * -1
zhengfu:function(){
var vars = document.getElementById("inputs");
var str = vars.value * -1;
vars.value = str;
}
}
});
</script>
</body>
<html>
标签：function,
Vue,
vars,
实现,
value,
计算器,
var,
input
From： https://blog.51cto.com/u_15889292/6249915