vue基础-动态class

最新推荐文章于 2024-06-20 10:43:02 发布

佐杰

最新推荐文章于 2024-06-20 10:43:02 发布

阅读量469

点赞数

分类专栏： vue分享文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/OnlyoneFrist/article/details/132012742

版权

vue分享专栏收录该内容

30 篇文章 0 订阅

订阅专栏

vue基础-动态class

- 1、目标
- 2、语法

1、目标

用v-bind给标签class设置动态值

2、语法

:class = "{类名：布尔值}"

示例：

<template>
  <div id="app">

    <div>
      <!--:class="{类名:布尔值}"-->
      <!--使用场景 控制标签是否应该有类名-->
      <p :class="{red_tsr:bool}">动态class</p>
    </div>
    
   
  </div>
  
</template>

<script>
export default {
  data(){
    return{
      bool:true
    }
  }
}
</script>

<style>
.red_tsr{
  color: red;
}

</style>