vue中点击导航栏，动态改变样式，经典写法

格瑞@_@

于 2024-08-18 12:57:03 发布

阅读量125

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44849312/article/details/141298172

版权

vue中点击导航栏，动态改变样式，经典写法

在vue中，我们通常会有这样的情况，在多个子模块之间，点击其中一个子模块，修改当前点击的子模块的样式。如图，点击B模块时，模块B样式改变，其它样式还原啦：
在这里插入图片描述

具体怎么实现呢，主要是使用动态属性绑定来实现的，其中也涉及静态属性和动态属性结合使用。未选中模块的样式我们看做是静态属性，动态属性是在点击后加进来的（覆盖）的样式属性

动态属性绑定

我们先了解下动态属性绑定：动态属性绑定就是用变量动态的添加属性，如下：

<div id="app">
  <div :class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>

这里的 .active样式是否生效，取决于 isActive这个变量值是否为true

静态样式和动态样式结合使用

我们要实现想要的效果，还需要结合静态样式，因为静态样式用来渲染其它未激活状态的子模块，动态样式用来渲染激活状态的子模块
写法如下，需要把绑定的class属性改成中括号形式，因为中括号形式表示样式数组，存放多个样式：

:class="['itemclass' ,  indexItem== index ? 'active' :'']"

第一个样式为 itemclass，第二个样式要看 indexItem== index 这个表达式是否成立，如果成立，则加入 active样式，表示激活状态，
如果不成立，则不加任何样式，表示非激活状态。
这样描述应该很容易理解哈。

完整代码

于是我们可以写出完整的代码, 其中，我用indexItem 表示（标识）当前是哪一项是选中激活状态，index是当前选项的数组下标。
indexItem == index 就是当前这个模块，是否等于激活状态下的模块，如果是，添加active属性，修改背景色。
其中，点击事件changeItem用来设置当前点击的模块为激活状态的模块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue动态样式绑定</title>
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app" class="line">
      <div
        class="static"
        @click="changeItem(index)"
        v-bind:class="['itemclass', index==indexItem ? 'active':'']"
        v-for="(item, index) in items"
      >
        {{item.name}}
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          indexItem: 0,
          items: [{ name: "A" }, { name: "B" }, { name: "C" }],
        },
        methods: {
          changeItem(index) {
            this.indexItem = index;
          },
        },
      });
    </script>
    <style>
      .itemclass {
        margin: 40px;
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 40px;
        background: rgb(191, 212, 222);
      }

      .active {
        background: rgb(37, 209, 198);
      }
      .line {
        width: 600px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
      }
    </style>
  </body>
</html>

格瑞@_@

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中点击导航栏，动态改变样式，经典写法

第一个样式为 itemclass，第二个样式要看 indexItem== index 这个表达式是否成立，如果成立，则加入 active样式，表示激活状态，在vue中，我们通常会有这样的情况，在多个子模块之间，点击其中一个子模块，修改当前点击的子模块的样式。indexItem == index 就是当前这个模块，是否等于激活状态下的模块，如果是，添加active属性，修改背景色。我们要实现想要的效果，还需要结合静态样式，因为静态样式用来渲染其它未激活状态的子模块，动态样式用来渲染激活状态的子模块。
复制链接

扫一扫