vue怎么设置选中样式
时间: 2023-10-25 22:18:44 浏览: 37
Vue中设置选中样式有多种方法,以下是其中的一些:
1. 使用v-bind:class指令绑定样式类名,根据选中状态动态切换样式类名。
```
<template>
<div :class="{selected: isActive}">
<!-- content -->
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
}
</script>
<style>
.selected {
background-color: yellow;
}
</style>
```
2. 使用v-bind:style指令绑定样式属性,根据选中状态动态切换样式属性。
```
<template>
<div :style="{backgroundColor: isActive ? 'yellow' : 'white'}">
<!-- content -->
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
}
</script>
```
3. 在组件中设置选中样式。
```
<template>
<div :class="{selected: isActive}">
<my-component :selected="isActive"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
},
data() {
return {
isActive: false
}
}
}
</script>
<style>
.selected {
background-color: yellow;
}
</style>
// MyComponent.vue
<template>
<div :class="{selected: selected}">
<!-- content -->
</div>
</template>
<script>
export default {
props: {
selected: {
type: Boolean,
default: false
}
}
}
</script>
<style>
.selected {
background-color: yellow;
}
</style>
```