用vue框架写一个简易(简陋)计算器
最近开始接触Vue.js框架来写一个简易的计算机案例吧代码:!+tab 快速生成一个页面简易计算器然后我们利用JavaScript要引入vue模块:在head标签中写:./lib/vue.js 是我的vue.js文件所在的位置,写的时候可以用自己文件所在位置进行替换简易计算器然后我i们需要三个文本框,一个选择的下拉列...
最近开始接触Vue.js框架
来写一个简易的计算机案例吧
代码:
!+tab 快速生成一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset = UTF-8/>
<title>简易计算器</title>
</head>
<body>
</body>
</html>
然后我们利用<script src="">
引入vue模块:
在head标签中写:
<script src="./lib/vue.js"></script>
./lib/vue.js
是我的vue.js文件所在的位置,写的时候可以用自己文件所在位置进行替换
<!DOCTYPE html>
<html>
<head>
<meta charset = UTF-8/>
<title>简易计算器</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div class="app"></div>
<script>
var vm = new Vue({ //这是用来创建一个vue实例
el: '#app', //el属性是用来绑定vue要控制的区域
data: {}, //data属性是用来存储被控制区域的数据
methods: {} //methods属性用来写被控制区域中用到的方法
})
</script>
</body>
</html>
然后我i们需要三个文本框,一个选择的下拉列表,一个按钮,即:
<input type="text" >
<select>
<option value="+">
<option value="-">
<option value="*">
<option value="/">
</select>
<input type="text" >
<input type="bottom" >
<input type="text" >
然后我们用v-model对需要绑定的输入输出框和运算符号进行双向绑定:
<div id="app">
<input type="text" v-model="n1"/>
<select name="" id="" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2"/>
<input type="button" value="=" @click="calc"/>
<input type="text" v-model="result"/>
</div>
在data属性内对n1,n2,result,opt赋初值:
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
因为v-model是双向绑定,在view层的改变也会同步到vm层。
最后便是函数方法的编写,按钮中定义了一个鼠标单击事件@click="calc"
我么用两个方法来做:
第一种方式:
methods: {
calc(){ //计算器算数的方法
逻辑
switch(this.opt){
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
第二种方式:
这种是简易方式:正式开发中尽量少用(用拼接的方式做)
methods: {
calc(){
var runCode = ‘parseInt(this.n1) ’ + this.opt + ’ parseInt(this.n2)’
this.result = eval(runCode)
}
}
这样一个简易计算器就做好了(效果如图)。
当然,如果需要再添加别的运算,添加具有新运算值的option,并将计算方法编入calc方法中即可。
第一次写博客,如有问题,戳我就ok!
欢迎批评和指正。
更多推荐
所有评论(0)