动态绑定class
动态绑定style
<template>
<div class="profile">
<div :style='styleObj'>profile</div>
</div>
</template>
<script>
export default {
data() {
return {
styleObj: {
fontSize: '40px',
backgroundColor: '#bfa',
color: 'red'
}
}
},
}
</script>
效果图:
可参考:https://blog.csdn.net/z591102/article/details/108127404
方法一:
<div :class="currentIndex === index ? 'active' : ''">哈哈哈</div>
方法二(对象):
<div :class="{'active': currentIndex === index }">哈哈哈</div>
方法三(数组):
<div :class="[isActive,isSort]">哈哈哈</div>
data() {
return{
isActive:'active',
isSort:'sort'
}
}
<div :class="[isActive?'active':'']">哈哈哈</div>