Vue框架 —使用样式

最新推荐文章于 2024-10-28 17:17:03 发布

原创最新推荐文章于 2024-10-28 17:17:03 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在Vue框架中如何使用动态绑定class样式的方法，包括直接传递数组、使用三元表达式以及对象语法，展示了不同的代码实现方式及其效果。

使用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> 
        .color{
              color:red;
        }
        .thin{
            /*  瘦体 */
            font-weight: 100;           
        }
        .active{
            letter-spacing:0.5em;
            /* 间距大小 */
        }
    </style>
</head>
<body>
      <div id="app"> 
       <h1 class="color thin"> 好嗨哦</h1>
       <!-- 第一种使用方式，直接传递一个数组，但是class需要 v-bind 进行数据绑定 -->
       <h1 :class="['thin',flag?'active':'']"> 好嗨哦</h1>
       <!-- 在数组中使用三元表达式  -->
       <h2 :class="['thin',{'active':flag}]"> 好嗨哦</h2>
        <!-- 在数组中使用对象来代替三元表达式，提高代码可读性  -->
       <h2 :class="['thin',{'active':flag}]"> 好嗨哦</h2>
       <!-- 直接使用对象,地市对象的属性是类名，可带引号，也可以不写 属性值是一个标识符-->
       <h3 :class="{color:true, thin:true, active:false}"> 好嗨哦</h3>
              
     </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>          
                   var vm =new Vue({
                    el: '#app',   
                    data:{                          
                     flag:true,                           
                    }                             
                })
        </script>  
</body>
</html>

效果如下所示：