Vue写简易计算器的四种方法分别是表达式，methods，watch，computed。
一、用表达式实现制作简易计算器
1.通过if判断运算法实现简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="n1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="n2" />
<br />
<div>
<p v-if="opt=='+'">{
{n1+n2}}</p>
<p v-if="opt=='-'">{
{n1-n2}}</p>
<p v-if="opt=='*'">{
{n1*n2}}</p>
<p v-if="opt=='/'">{
{n1/n2}}</p>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
n1:0,
n2:0,
opt:"+"
}
})
</script>
</html>
最低0.47元/天 解锁文章
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
