动态绑定class、style

动态绑定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>