思路：写一个可以加减乘除的计数器，用数据驱动视图。
我使用了俩种方法来实现：
第一种方法：对input框进行双向绑定，得到每一个下拉列表的值。然后对这个值进行判断是什么计算方法。
第二种方法：用到的关键字：eval()
eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstValue">
<select name="" id="" v-model="judgment">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="endVaule">
<button @click="add">=</button>
<input type="text" :value="value">
</div>
</body>
<script>
let vm= new Vue({
el:'#app',
data:{
firstValue:'',
endVaule:'',
value:'',
judgment:'+'
},
methods:{
add(){
//第一种方法
// this.judgment== '+'?this.value=Number(this.firstValue)+Number(this.endVaule):''
// this.judgment== '-'?this.value=Number(this.firstValue)-Number(this.endVaule):''
// this.judgment== '*'?this.value=Number(this.firstValue)*Number(this.endVaule):''
// this.judgment== '/'?this.value=Number(this.firstValue)/Number(this.endVaule):''
//第二种方法
this.value=eval(
Number(this.firstValue)+this.judgment+Number(this.endVaule)
)
}
}
})
</script>
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
