vue中class样式

Posted wangyuxue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中class样式相关的知识，希望对你有一定的参考价值。

一、使用class样式


1. 数组
<h1 :class="[‘red‘, ‘thin‘]">这是一个邪恶的H1</h1>
 

2. 数组中使用三元表达式
<h1 :class="[‘red‘, ‘thin‘, isactive?‘active‘:‘‘]">这是一个邪恶的H1</h1>
 

3. 数组中嵌套对象
<h1 :class="[‘red‘, ‘thin‘, {‘active‘: isactive}]">这是一个邪恶的H1</h1>
 

4. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
 
二、实例
<style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <h1 :class="[‘thin‘, ‘italic‘]">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在数组中使用三元表达式 -->
    <h1 :class="[‘thin‘, ‘italic‘, flag?‘active‘:‘‘]">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <h1 :class="[‘thin‘, ‘italic‘, {‘active‘:flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>


  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>
</body>

 

以上是关于vue中class样式的主要内容，如果未能解决你的问题，请参考以下文章

在vue中使用样式的方法

vue中的class与style绑定

vue学习 vue中样式 class 定义引用

vue中点击div里的当前元素添加class删除其他兄弟元素的class？

vue动态修改class

在vue中使用样式