pc端大屏可视化中的导航栏的应用

最新推荐文章于 2023-05-05 18:07:08 发布

weixin_51053942

最新推荐文章于 2023-05-05 18:07:08 发布

阅读量320

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_51053942/article/details/126241889

版权

<template>
  <div>
    <ul>
      <li
        :class="tagName === 'keywordAnalysis' ? 'current' : ''"
        @click="setTagname('keywordAnalysis')"
      >
        关键词分析
      </li>
      <li
        :class="tagName === 'cooperationTrend' ? 'current' : ''"
        @click="setTagname('cooperationTrend')"
      >
        合作热点趋势
      </li>
      <li
        :class="tagName === 'keyWord' ? 'current' : ''"
        @click="setTagname('keyWord')"
      >
        热词共现图谱
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagName: "",
    };
  },
  methods: {
    setTagname(item) {
      this.tagName = item;
    },
  },
};
</script>

<style>
    div {
    background: #f1f4f9;
    height: 65px;
    line-height: 65px;
    font-family: "PingFang SC-Light";
    }
    ul li {
    list-style: none;
    }
    ul {
    display: flex;
    display: flex;
    justify-content: space-between;
    }
    li {
    font-size: 20px;
    color: #262626;
    }
    .current {
    font-size: 20px;
    cursor: pointer;
    margin-top: 6px;
    height: 53px;
    line-height: 53px;
    border-radius: 8px;
    background: #fff;
    color: #2f47a1;
    padding: 0 27px;
    }
</style>

总结：若导航栏中有多个li,给一个点击事件传入相应的参数，把这个参数传data中的一个变量，

利用data中的变量判断，若点击它，就添加需求中所需要的样式