介绍
Vue2元素选中的样式记录
# 样式动态绑定
- 样式动态绑定 分为
:class类名动态绑定 和:style行内样式动态绑定
class 类的动态绑定
:class="[]"可以绑定多个class类名 还可以做三元判断
<div v-for="(item,index) in deptList" :key="index" class="permission_check">
<div :class="['permission_check_box',PermissionChange === index ? 'backgroundTrue' : 'backgroundFalse']" @click="changePermission(index)">
{{ item }}
</div>
</div>
style 行内样式绑定
可以给模板设置
data()中的值 实现动态style行内样式设置:style可以直接在模板上 设置样式(行内样式 高权重) 事件监听也支持 相当于用JS来进行css样式设置:style有两种写法动态写法- 通过
{}来写 他的写法和JS修改样式写法一样 带有-的css样式 必须变成驼峰式写法 用,进行分割 - 通过模板字符串来写 模板字符可以使用单位拼接 也可以直接使用拼接好的值 用
;进行分割
- 通过
<template>
<div>
<!-- 通过{}来写 他的写法和JS修改样式写法一样 带有-的css样式 必须变成驼峰式写法 -->
<div :style="{maxWidth: 'widthValue',width: '100%'}" />
<!-- 通过模板字符串来写 模板字符可以使用单位拼接max-width: ${widthValue}px; 也可以直接使用拼接好的值 -->
<div :style="`max-width: ${widthValue};width: ${100}%`" />
</div>
</template>
// widthValue的值
widthValue: '400px',
# 效果样例
- 实现一个点击 会改变背景色的样式 我们可以通过
:class="[]"动态绑定我们的类名 然后通过css的:hover来实现鼠标经过的效果
# 实现代码
- 知道动态绑定后 我们可以通过
v-for渲染的索引 和 点击事件@click的传参 来判断用户是否选中该元素
<template>
<div class="allbox">
<div v-for="(item,index) in deptList" :key="index" class="permission_check">
<div :class="['permission_check_box',PermissionChange === index ? 'backgroundTrue' : 'backgroundFalse']" @click="changePermission(index)">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Position',
data () {
return {
// 选中状态位
PermissionChange: null,
deptList: ['权限1', '权限2', '权限3', '权限4'],
}
},
methods: {
// 接收用户的选中索引
changePermission (e) {
this.PermissionChange = e
},
}
}
</script>
<style scoped lang="scss">
.allbox {
width: 500px;
.permission_check {
margin-top: 20px;
margin-bottom: -20px;
.permission_check_box {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
&:hover {
background: #f5f7fa;
}
}
.backgroundTrue {
background: #edf6ff;
}
.backgroundFalse {
background: #fff;
}
}
}
</style>