Vue 中用 HTML + CSS 实现导航按钮动画绘制

先看效果：
默认 按钮1 亮

鼠标指针滑动到 按钮2 按钮2 字体颜色改变

鼠标指针点击 按钮3， 按钮3亮起

下面是实现过程：用的 float 布局，tabButtonActive 的 class 和 style 绑定，有需要的小伙伴可以参考

<template>
	<div class="tabBarArea">
	    <div class="tabButton" :class="[tabName=='按钮1'?'tabButtonActive':'']"
	         @click="tabName='按钮1'">按钮1</div>
	    <div class="tabButton" :class="[tabName=='按钮2'?'tabButtonActive':'']"
	         @click="tabName='按钮2'">按钮2</div>
	    <div class="tabButton" :class="[tabName=='按钮3'?'tabButtonActive':'']"
	         @click="tabName='按钮3'">按钮3</div>
	    <div class="tabButton" :class="[tabName=='按钮4'?'tabButtonActive':'']"
	         @click="tabName='按钮4'">按钮4</div>
	</div>
</template>

<script>
export default {
  name: 'buttonTab',
  data() {
    return {
      tabName: '按钮1',
    };
  },
};
</script>

<style scoped>
  /*清除浮动*/
  .tabBarArea:after{
    display: block;
    content: '';
    clear: both;
  }
  .tabButton {
    float: left;
    margin-left: 30px;
    border-radius: 10px;
    cursor: pointer;
    padding: 2px 10px;
  }
  .tabButton:hover {
    color: #326BE8;
  }
  .tabButtonActive {
    background-color: #326BE8;
    color: #ffffff;
    transition: all .5s;
  }
  .tabButtonActive:hover {
    color: #ffffff;
  }
</style>