vue样式绑定实现收藏

Vue 样式绑定实现收藏功能

在 Vue 中，可以通过动态绑定样式来实现收藏功能，常见的方法是使用 v-bind:class 或 v-bind:style 来切换样式状态。

使用 v-bind:class 实现

定义一个数据属性 isFavorited 来控制收藏状态，通过点击事件切换状态，并动态绑定类名。

<template>
  <div>
    <button 
      @click="toggleFavorite"
      :class="{ 'favorited': isFavorited }"
    >
      {{ isFavorited ? '已收藏' : '收藏' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited
    }
  }
}
</script>

<style>
button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

button.favorited {
  background-color: gold;
  color: white;
  border-color: gold;
}
</style>

使用 v-bind:style 实现

通过动态绑定样式对象来切换样式，适用于需要直接修改样式属性的场景。

<template>
  <div>
    <button 
      @click="toggleFavorite"
      :style="buttonStyle"
    >
      {{ isFavorited ? '已收藏' : '收藏' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false
    }
  },
  computed: {
    buttonStyle() {
      return {
        backgroundColor: this.isFavorited ? 'gold' : '#f0f0f0',
        color: this.isFavorited ? 'white' : 'black',
        border: this.isFavorited ? '1px solid gold' : '1px solid #ccc',
        padding: '8px 16px',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited
    }
  }
}
</script>

结合图标实现收藏

如果需要使用图标（如 Font Awesome 或 Material Icons），可以通过动态绑定类名切换图标样式。

<template>
  <div>
    <button @click="toggleFavorite">
      <i :class="isFavorited ? 'fas fa-star' : 'far fa-star'"></i>
      {{ isFavorited ? '已收藏' : '收藏' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited
    }
  }
}
</script>

<style>
button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.fas.fa-star {
  color: gold;
}
</style>

结合本地存储持久化状态

如果需要保存收藏状态到本地存储（localStorage），可以在 toggleFavorite 方法中增加逻辑。

methods: {
  toggleFavorite() {
    this.isFavorited = !this.isFavorited
    localStorage.setItem('isFavorited', this.isFavorited)
  }
},
created() {
  const savedState = localStorage.getItem('isFavorited')
  if (savedState !== null) {
    this.isFavorited = savedState === 'true'
  }
}

以上方法可以根据实际需求选择或组合使用，灵活实现收藏功能的样式绑定。