怎么新建MySQL数据库
发布时间：2022-06-21
作者：admin
阅读：705
阅读：705
这篇文章主要讲解了“用Vue框架怎样写一个计算器功能，方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用Vue框架怎样写一个计算器功能，方法是什么”吧！
现在大家对于用Vue框架怎样写一个计算器功能，方法是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
实现功能：将两个输入框中的值进行加减乘除计算
用到的知识点：
1.v-model数据双向绑定
2. .number转化为数字
3.@click点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//选择自己的vue位置
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 将第一个值转换为数字 -->
<input type="number" v-model.number="num1"/>
<select v-model="str">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" v-model.number="num2"/>
<!-- 点击等号执行cal函数里的内容 -->
<button type="button" @click="calc">=</button>
<!-- 将结果输出 -->
<input type="text"/ v-model="num3">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
// 初始输入框中的数值
num1:0,
num2:0,
num3:0,
str:'+'
},
methods:{
calc(){
if(this.str=="+"){
this.num3=this.num1+this.num2
}else if(this.str=="-"){
this.num3=this.num1-this.num2
}else if(this.str=="*"){
this.num3=this.num1*this.num2
}else if(this.str=="/"){
this.num3=this.num1/this.num2
}
}
}
})
</script>
</html>
结果：
现在大家对于用Vue框架怎样写一个计算器功能，方法是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理