Vue制作仿手机计算器

最新推荐文章于 2023-04-03 10:27:06 发布

置顶

昵称~

最新推荐文章于 2023-04-03 10:27:06 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js css javascript

本文链接：https://blog.youkuaiyun.com/qq_42577408/article/details/108039240

版权

Vue制作仿手机计算器

1.首先是把样式做出来，按钮是0-9，还有加减乘除，百分号，清除按钮，小数点，等号、等等
在这里插入图片描述
2.把官方网站的JS插件引用，https://cn.vuejs.org/v2/guide/

页面视图

JS
在这里插入图片描述

 new Vue({
   
            el: "#app",
            data: {
   
                equation: '0',
                isDecimalAdded: false, //防止在一组数字中间输入超过一个小数位
                isOperatorAdded: false, //判断之否已点击 加、减、乘、除，防止连续点击超过一个运算符号
                isStarted: false, //判断计算器是否已经开始输入数字，用于正负数和百分比计算的时候作一些判断
            },
            methods: {
   
                //Check if the character is + - × ÷
                isOperator(character) {
    //用来判断character 是否加减乘除
                    return ['+', '-', '×', '÷'].indexOf(character)

最低0.47元/天解锁文章