vue 3 第二十七章：样式（动态class、动态style）

作者：System 时间：2024年08月21日分类：所有,vue.js 字数：606

在Vue 3中，可以使用绑定的class和style来实现动态样式。

动态 Class:




<template>
  <div :class="{ active: isActive, 'text-success': hasSuccess }"></div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true,
      hasSuccess: false
    }
  }
}
</script>

动态 Style:




<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>
 
<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
</script>

在这些例子中，:class和:style是Vue的绑定语法，它们允许你根据组件的数据动态地应用class或style。

vue 3 第二十七章：样式（动态class、动态style）

评论已关闭

推荐阅读