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'
}
}以上方法可以根据实际需求选择或组合使用，灵活实现收藏功能的样式绑定。
