动态class和行内样式

1、react18.3 动态class和行内样式

.active{
    color:red
}

import React, { useState } from 'react'
import './Home.css'
const Home: React.FC = () => {
  const [isActive, setIsActive] = useState(true)
  const [colorRed, setIsColorRed] = useState('red')
  const _isActive = () => {
    setIsActive(!isActive)
  }
  return (
    <div>
      <p style={{ color: colorRed }}>动态行内样式</p>
      <p className={isActive ? 'active' : ''}>动态class</p>
      <button onClick={_isActive}>更改样式</button>
    </div>
  )
}

export default Home

2、小程序 动态class和行内样式

    <view style="color:{{color}};" >动态行内样式</view>
    <view class="{{isActive ? 'active' : ''}}">动态class</view>
    <button bind:tap="_isActive">更改样式</button>

    Page({
      data: {
        color:'red',
        isActive: true
      },
      _isActive() {
        this.setData({ isActive: !this.data.isActive });
      }
    })

page{
    .active{
        color:red
    }
}

3、vue3.5 动态class和行内样式

<template>
  <div>
    <p :style="{color:colorRed}">动态行内样式</p>
    <p :class="{active:isActive}">动态class</p>
    <button @click="_isActive">更改样式</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const isActive = ref(true)
const colorRed = ref('red')
const _isActive = () => {
  isActive.value = !isActive.value
}
</script>
<style>
.active{
  color:red
}
</style>