当前位置：首页 > news >正文

动态样式绑定--style 和 class

news 来源：原创 2024/5/14 17:06:43

一：动态 style 写法

写之前注意的是：
凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
除了绑定值，其他的属性名的值要用引号括起来，例如
backgroundColor:#00a2ff 要写成 backgroundColor:‘#00a2ff’。
一 1 对象 形式
当我们没有取创建单独的css文件时，直接在代码中写

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

或者
<div
:style="{
   boxSizing:'border-box',
   height:29+'px',
   top:(valch-1)*29+'px',
   background:chose(val.subjectCode),
   borderLeft:' 10px ' + ' solid ' + chose1(val.subjectCode
)}" > /<div>

一 2 数组形式

<div :style="[baseStyles, overridingStyles]"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

一 3 三元运算符

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

<div 
	:style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'">
</div>

<!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>

<!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>

<!-- 写法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>

一 4 绑定data对象

<div :style="styleObject"></div>
<script>
    data() {
        return{
        // 在data中定义初始样式值
          styleObject: {
            color: 'red',
            fontSize: '14px'
          }  
        }
    }
</scrip>

二： class写法

二 1 对象形式

	<!-- isActive —判定值是： true/false -->
	<div :class="{ 'active': isActive  }">{{name}}</div>

二 2 判断是否绑定一个active

<div :class="{'active' : isActive == -2}"  >{{name}}</div>
<div :class="{'active' : isActive == item.nameId}"  >{{item.name}}</div>

二 3 绑定并判断多个

二3.1第一种用逗号隔开的

 <div :class="{ 'active': isActive, 'user': isUser }"></div>

二3.2 放在data里面

<div :class="classObject">{{name}}</div>
<script>
data() {
  return {
    classObject:{ 
    	active: true, 
    	user:false 
    }
  }
}
</script>

二3.3使用computed计算属性

<div :class="classObject">{{name}}</div>
<script>
data() {
  return {
    isActive: true,
    isUser: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      user:this.isUser
    }
  }
}
</script>

二 4 数组形式

二4.1单纯的数组

<div :class="[isActive,isUser]">{{name}}</div>
<script>
data() {
  return{
    isActive:'active',
    isUser:'user'
 }
}
</script>

二 4.2数组与三元运算符结合判断选择需要的class

注意：三元运算符后面的冒号，
两边的class需要加上单引号，否则不能正确渲染

:class = " [ isActive ? 'active' : ' ']  "
或者
:class = "[ isActive1 ? 'active' : ' ' ] "
或者
:class= " [ isActiveindex ? 'active' : ' ' ] "
或者
:class=" [ isActive == index ? 'active' : 'otherActiveClass' ] "

二4.3数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号、

:class="[
		     { active: isActive },  'sort'
    	]"
或者
:class="[
			{ active: isActive1 }, ‘sort’
		]"
或者
:class="[
			{ active: isActiveindex }, ‘sort’
		]"