如何在 Vue.js 3 上的按钮上添加悬停效果?

克里斯蒂安_RT

我正在构建一个计算器来帮助练习学习 Vue.js 3(我是 vue 新手)。我已经完成了基本功能,但我试图弄清楚如何在按钮上添加悬停动画。如果可能的话,我会尝试在白色按钮和橙色按钮之间制作不同的悬停颜色。任何帮助,将不胜感激

在此处输入图像描述

代码:

  <div class="calculator">
  <div class="display">{{ current || '0'}}</div>
  <div @click="clear" class="btn">C</div>
  <div @click="sign" class="btn">+/-</div>
  <div @click="percent" class="btn">%</div>
  <div @click="divide" class="operator">÷</div>
  <div @click="append('7')" class="btn">7</div>
  <div @click="append('8')" class="btn">8</div>
  <div @click="append('9')" class="btn">9</div>
  <div @click="multiply" class="operator">x</div>
  <div @click="append('4')" class="btn">4</div>
  <div @click="append('5')" class="btn">5</div>
  <div @click="append('6')" class="btn">6</div>
  <div @click="minus" class="operator">-</div>
  <div @click="append('1')" class="btn">1</div>
  <div @click="append('2')" class="btn">2</div>
  <div @click="append('3')" class="btn">3</div>
  <div @click="plus" class="operator">+</div>
  <div @click="append('0')" class="zero">0</div>
  <div @click="dot" class="btn">.</div>
  <div @click="equal" class="operator">=</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previous: null,
      current: '',
      operator: null,
      operatorClicked: false,
      hover: false
    }
  },

  methods: {
    clear() {
      this.current = '';
    },

    sign() {
      this.current = this.current.charAt(0) === '-' ?
      this.current.slice(1) : `-${this.current}`;
    },

    percent() {
      this.current = `${parseFloat(this.current) / 100}`;
    },

    append(number) {
      if (this.operatorClicked) {
        this.current = '';
        this.operatorClicked = false;
      }
      this.current = `${this.current}${number}`;
    },

    dot() {
      if (this.current.indexOf('.') === -1) {
      this.append('.')
      }
    },

    setPrevious() {
      this.previous = this.current;
      this.operatorClicked = true;
    },

    plus() {
      this.operator = (a,b) => a + b;
      this.setPrevious();
    },

     minus() {
      this.operator = (a,b) => a - b;
      this.setPrevious();
    },

     multiply() {
      this.operator = (a,b) => a * b;
      this.setPrevious();
    },

     divide() {
      this.operator = (a,b) => a / b;
      this.setPrevious();
    },

     equal() {
      this.current = `${this.operator(
      parseFloat(this.current),
      parseFloat(this.previous)
      )}`;  
      this.previous = null;
    }
  }
}
</script>

<style scoped>
.calculator {
  margin: 0 auto;
  width: 400px;
  font-size: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
}

.display {
  grid-column: 1 / 5;
  background-color: black;
  color: white;
}

.zero {
  grid-column: 1 / 3;
  border: 1px solid black;
}

.btn {
  background-color: white;
  border: 1px solid black;
}

.operator {
  background-color: orange;
  color: white;
  border: 1px solid black;
}
</style>
丹尼尔

您可以使用:hover选择器伪类,无需为此涉及 js/vue

IE:

.btn:hover {
  background-color: peach;
}
.operator:hover {
  background-color: lavender;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在vue.js中的更改单选按钮上从父div添加/删除类

如何在 vue.js 2 上添加类?

如何在 D3 附加的 vue.js 对象上启用 v-on evnt

如何删除网站按钮上的悬停效果?

如何在 Vue.js 3 中为动态添加到列表的元素设置动画?

如何在 WPF 中删除按钮上的悬停效果

如何在下拉菜单上添加悬停效果?

如何在 Vue.js 中的按钮单击事件上启用文本字段?

如何在vue 3中的按钮单击上打开新页面?

当用户将鼠标悬停在按钮的父容器上时,如何在按钮上添加悬停效果?

如何在AWS上运行Vue JS应用程序?

如何在Vue上循环获取月份矩js?

如何在vue.js上使用konva获得价值

如何在vue.js 2上使用Laravel的baseurl?

如何在 Vue Js 上只允许数字和字母?

如何在 vue3 compositionAPI 上定义指令?

如何在vue-cli 3上禁用eslint?

如何在 Vue 3 上创建本地事件总线

如何在 :title nav-tab bootstrap vue.js 上添加图标 fontawesome?

按钮上类似3D的悬停效果

Vue Js:如何在localStorage中存储图片并在vue js中显示在网页上

(Vue.js)如何在'Vue.js'上使用github页面

Vue.js bootstrap-vue:如何在我的表单中正确添加取消按钮

如何在 vue 组件上添加图像?

如何在按钮和单击效果上添加边框?

如何在按钮上添加效果,如下图所示?

如何在Vue JS 3应用程序中使用Bootstrap 4添加外部CSS和CSS?

如何在vue中的vue-good-table上添加编辑按钮

如何在单击D3.js的按钮上处理数据过滤?