Question

我在更改活动列表的背景颜色时遇到问题。如果有人知道并帮助我，我将非常感激。

由于我要从数据功能中获取列表内容以在HTML标签中使用v-for，所以我对如何创建活动列表和设置样式感到困惑。

Answer 1

<template>
  <div class="nav" :class="{ openMenu: menuVisible }">
    <div class="mouseover nav-toggle" @click="sideBarToggle">
      <a @mouseover="mouseover" @mouseleave="mouseleave">
        <img :src="image_src" class="nav-image">
      </a>
    </div>

    <div id="nav-content">
      <ul class="nav-list">
        <li
          v-for="(item, index) in items"
          :key="item.list"

          class="nav-list-contents"
        >
          <a>
            <router-link tag="div" :to="item.url" :class="{ 'active': index === 0 }">
              <i :class="item.icon"/>
              {{ item.list }}
            </router-link>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("moduleMenubar");
import Cookies from "js-cookie";
const hamburgerMenu = Cookies.get("openAndClose");

export default {
  data: function() {
    return {
      image_src: "humburger1.png",
      items: [
        { icon: "fa fa-fw fa-building", list: "企業管理", url: "/company" },
        { icon: "fa fa-fw fa-user", list: "ユーザー管理", url: "/user" },
        { icon: "fa fa-fw fa-database", list: "マスター管理", url: "/master" },
        {
          icon: "fa fa-fw fa-wrench",
          list: "法対応メンテナンス",
          url: "/legal_maintenance"
        },
        { icon: "fa fa-fw fa-newspaper", list: "お知らせ管理", url: "/info" },
        {
          icon: "fa fa-fw fa-sitemap",
          list: "企業グルーピング",
          url: "/grouping"
        }
      ]
    };
  },
  computed: {
    ...mapState(["menuVisible"])
  },
  methods: {
    ...mapMutations(["sideBarToggle"]),
    mouseover: function() {
      if (!this.menuVisible) {
        this.image_src = "migi.png";
      } else {
        this.image_src = "hidari.png";
      }
    },
    mouseleave: function() {
      this.image_src = "humburger1.png";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./public/common";

.active {
  background-color: red;
  width: 200px;
  height: 50px;
}

.fa {
  margin-right: 10px;
}

.nav-image {
  width: 15px;
  height: 15px;
}

.nav {
  font-size: 15px;
  width: 40px;
  margin: left;
  color: white;
  height: 100%;
  padding-top: 10px;
  background-color: #ab2a3e;
  position: relative;
  transition: width 0.3s ease 0;
  cursor: pointer;
  /*はみ出した文字を省略する*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav::-webkit-scrollbar {
  display: none;
}

.nav-list {
  padding: 10px; /* 左の余白削除 */
  margin-top: 50px;

  .nav-list-contents {
    cursor: pointer;

    list-style: none;
    width: 200px;
    height: 50px;
  }

  .nav-list-contents:hover {
    background-color: black;
  }
}

.nav.openMenu {
  width: 200px;
}

.nav-toggle {
  background-color: white;
  padding: 6px 6px;
  margin: 10px 5px;
  margin-bottom: 10px;
  float: right;
}
</style>

Answer 2

<div v-for="item in list" :style="{backgroundColor: item.color, backgroundImage: 'url(' + item.imageUrl + ')'}"></div>

data () {
  return {
    list: [
      {color: '#ff0', imageUrl: 'https://.....'}
    ]
  }
}

Vue列表的样式backgroundColor

2 个答案: