vue-动态高亮效果

个人练习,仅供参考

实现如下效果:点击某块,某块变成其他颜色。

具体实现代码:

上边:

html 复制代码
<template>
  <div>
    <h3 style="color: #f69">动态高亮效果</h3>
    <hr>
<!-- 对象 -->
    <div class="navarr">
      <div
        v-bind:class="{ active: current == n }"
        v-for="n in navarr"
        :key="n"
        @click="current = n"
      >
        {{ n }}
      </div>
    </div>
<!-- 数组 -->
    <div class="navarr1">
      <div
        v-bind:class="[current1==n1?'active':'']"
        v-for="n1 in navarr1"
        :key="n1"
        @click="current1 = n1"
      >
        {{ n1 }}
      </div>
    </div>
    <br>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navarr: ["首页", "推荐", "分类", "我的"],
      current: "首页",
      navarr1: ["首页", "推荐", "分类", "我的"],
      current1: "首页",
    };
  },
  methods: {},
  created: {},
};
</script>
<style scoped>
.navarr ,.navarr1{
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
}
.active {
  color: #f69;
}
</style>

下边:

html 复制代码
<template>
  <div id="app">
    <router-view />
    <footer class="footer">
      <router-link to="/">
        <img src="/favicon.ico" alt="" />
        <p :class="{ active: current == '/' }" @click="current = '/'">首页</p>
      </router-link>
      <router-link to="/sell">
        <img src="/favicon.ico" alt="" />
       <p :class="{ active: current == '/sell' }" @click="current = '/sell'"> v-if&v-model</p>
      </router-link>
      <router-link to="/key">
        <img src="/favicon.ico" alt="" />
        <p :class="{ active: current == '/key' }" @click="current = '/key'">Key</p>
      </router-link>
      <router-link to="/watch">
        <img src="/favicon.ico" alt="" />
        <p :class="{ active: current == '/watch' }" @click="current = '/watch'">Watch</p>
      </router-link>

      <router-link to="/cart">
        <img src="/favicon.ico" alt="" />
        <p :class="{ active: current == '/cart' }" @click="current = '/cart'">购物车</p>
      </router-link>
      <router-link to="/mine">
        <img src="/favicon.ico" alt="" />
        <p :class="{active:current=='/mine'}" @click="current='/mine'">我的</p>
      </router-link>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: "/",
    };
  },
  methods: {},
  created: {},
};
</script>
<style scoped>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: rgb(243, 207, 207);
}
.footer a {
  color: gray;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer a img {
  width: 20px;
  height: 20px;
}
.active {
  color: #f69;
}
</style>
相关推荐
aha-凯心32 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js