使用vue写了一个简单的计算器，只能实现数值加法计算，有兴趣的小伙伴可以看看
首先需要先引入vue文件
效果图
全部代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#app {text-align: center;height: 400px;width: 300px;border: solid 1px gray;margin: auto}input {margin: 15px 0;}/* #app .content {border: solid 1px gray;height: 350px;width: 250px;margin: auto;} */input[type="text"]{margin-left: 5px;height: 20px;}input[value="计算"] {height: 30px;font-weight: bold;width: 200px;border: solid 1px black;border-radius: 5px;}input[value="清除"] {height: 30px;font-weight: bold;width: 200px;border: solid 1px brown;color: brown;border-radius: 5px;}#app span:last-of-type{color: brown;font-size: 30px;font-weight: bold;font-family: '微软雅黑';vertical-align: middle;}h2 {text-align: center;margin: 20px auto;}</style>
</head><body><div id="app"><h2>加法计算器</h2><span>数值A</span><input type="text" name="" id="" v-model="number_1"><br><span>数值B</span><input type="text" name="" id="" v-model="number_2"><br><!-- <input type="button" value="计算" name="" id="" @click="sum=parseFloat(number_1) + parseFloat(number_2)"><br> --><input type="button" value="计算" name="" id="" @click="sumber"><br><input type="button" value="清除" name="" id="" @click="clearSumber"><br><span>计算结果：</span><span v-text="sum"></span></div><script src="@2.5.16/dist/vue.js"></script><script>var vm = new Vue({el: "#app",data() {return {number_1: null,number_2: null,sum: 0}},methods: {sumber: function () {this.sum = parseFloat(this.number_1) + parseFloat(this.number_2)console.log(typeof (this.sum));},clearSumber:function(){this.number_1 = ""this.number_2 = ""this.sum = 0}},computed: {}})</script>
</body></html>
本文发布于:2024-01-31 21:54:44，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170670928631617.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
