vue3 实现 计算器案例
注:功能并不完整,主要练习vue3的书写方式<template><h3 class="title">计算器</h3><div class="MyComputed"><div class="result"><div class="text"><el-tag type="" v-model="result">{{ re
·
注:功能并不完整,主要练习vue3的书写方式
<template>
<h3 class="title">计算器</h3>
<div class="MyComputed">
<div class="result">
<div class="text">
<el-tag type="" v-model="result">{{ result }}</el-tag>
</div>
</div>
<div class="control">
<el-row>
<el-button type="primary" @click="getButtonNumber($event)" round value="7">7</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="8">8</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="9">9</el-button>
<el-button type="primary" @click="add($event)" value="+" round>+</el-button>
</el-row>
<el-row>
<el-button type="primary" @click="getButtonNumber($event)" round value="4">4</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="5">5</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="6">6</el-button>
<el-button type="primary" @click="sub($event)" round>-</el-button>
</el-row>
<el-row>
<el-button type="primary" @click="getButtonNumber($event)" round value="1">1</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="2">2</el-button>
<el-button type="primary" @click="getButtonNumber($event)" round value="3">3</el-button>
<el-button type="primary" @click="multiply($event)" round value="*">*</el-button>
</el-row>
<el-row>
<el-button type="primary" @click="clear" round>C</el-button>
<el-button type="primary" @click="getButtonNumber($event)" value="0" round>0</el-button>
<el-button type="primary" @click="getButtonNumber($event)" value="." round>.</el-button>
<el-button type="primary" @click="equal" round>=</el-button>
</el-row>
</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Vue3TestHome",
setup() {
let result = ref(0);
function getButtonNumber(e) {
// 拿到绑定的值
// console.log(e.currentTarget.value);
let value = e.currentTarget.value;
result.value = result.value + value;
}
// 加法
function add(e) {
let add = e.currentTarget.value;
result.value = result.value + add;
}
// 减法
function sub(e) {
let add = e.currentTarget.value;
result.value = result.value + add;
}
// 乘法
function multiply(e) {
let add = e.currentTarget.value;
result.value = result.value + add;
}
// 清除
function clear() {
result.value = 0;
}
// 等于
function equal() {
console.log("======");
if (result.value.includes("+")) {
let value = result.value.split("+");
// console.log(value);
result.value = Number(value[0]) + Number(value[1]);
}
if (result.value.includes("-")) {
let value = result.value.split("-");
// console.log(value);
result.value = Number(value[0]) - Number(value[1]);
}
if (result.value.includes("*")) {
let value = result.value.split("*");
// console.log(value);
result.value = Number(value[0]) * Number(value[1]);
}
}
return {
result,
getButtonNumber,
add,
sub,
multiply,
clear,
equal,
};
},
};
</script>
<style lang="scss" scoped>
更多推荐
已为社区贡献13条内容
所有评论(0)