07.vue中样式class.html_vue根据class名称找到html-优快云博客

本文链接：https://blog.youkuaiyun.com/luzhensmart/article/details/84204727

本文详细介绍了在Vue.js中如何使用不同的方式来绑定样式，包括直接在HTML标签中使用类名，利用Vue的class绑定特性结合数组和对象语法，以及如何通过数据属性动态控制样式应用。通过实例展示了如何根据条件添加或移除特定样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>

    .red{
        color: red;
    }

    .thin{
        /* 属性设置文本的粗细 */
        font-weight: 200;
    }

    .italic{
        /* 斜体的 */
        font-style: italic;
    }

    .active{
        /*  增加或减少字符间的空白（字符间距）
        em比如说：如果在一个<div>设置字体大小为“16px”，
        此时这个<div>的后代元素教程了是将继承他的字体大小，
        除非重新在其后代元素中进行过显示的设置。
        此时，如果你将其子元素的字体大小设置为“0.75em”，
        那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”
         */
        letter-spacing: 0.5em;
    }

</style>

<script src="./lib/vue.min.js"></script>

</head>

<body>

     <div id="app">
          <!-- 正常情况下设置多个样式 这么写-->
          <h1 class="red thin">这是一个很大很大的H1,大到你无法想象!!!</h1>

          <!-- vue 这么写 :class['上面的style属性','上面的style属性'] 里面的属性 必须用单引号括起来-->
          <h1 :class="['red','thin','italic','active']">这是一个很大很大的H1,大到你无法想象!!!</h1>

          <!-- [里面还可以用到vue data里面的变量和条件表达式] 实现flg为true时 增加active属性 false时不增加-->
          <h1 :class="['red','thin','italic',flg ?'active' : '']">这是一个很大很大的H1,大到你无法想象!!!</h1>

          <!-- 上述 还可以这样实现 类似 active:true active:false的方式 -->
          <h1 :class="['red','thin','italic',{'active' : flg}]">这是一个很大很大的H1,大到你无法想象!!!</h1>

           <!-- 上述 还可以这样实现 类似 active:true active:false的方式
                这里的属性red thin italic active 可以带引号 也可以不带引号
           -->
           <h1 :class="{red : true,thin : true,italic : true,active : false}">这是一个很大很大的H1,大到你无法想象!!!</h1>

           <!-- 上述 还可以这样实现 类似 active:true active:false的方式
                这里的属性red thin italic active 可以带引号 也可以不带引号
                class属性 放到vue data中 变量的方式来获取
           -->
           <h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!</h1>
     </div>


     <script>

        var vm = new Vue({
             el : '#app',
             data : {
             flg : false,
             classObj : {red : true,thin : true,italic : true,active : false}
            }
        }) 

     </script>

</body>

</html>