Vue中通过属性绑定为元素设置class类样式

1.数组<h1 :class="['red','italic']">这是一个很大的H1,大到你无法想象</h1>2.数组中使用三元表达式<h1 :class="['thin','italic',isactive?'active':'']">这是一个很大的H1,大到你无法想象&

北海之灵

6667人浏览 · 2018-08-11 10:36:48

北海之灵 · 2018-08-11 10:36:48 发布

1.数组

<h1 :class="['red','italic']">这是一个很大的H1,大到你无法想象</h1>

2.数组中使用三元表达式

<h1 :class="['thin','italic',isactive?'active':'']">这是一个很大的H1,大到你无法想象</h1>

3.数组中嵌套对象

<h1 :class="['thin','italic',{'active':isactive}]">这是一个很大的H1,大到你无法想象</h1>

4.直接使用对象

<h1 :class="{red:true,italic:true,active:false}">这是一个很大的H1,大到你无法想象</h1>

完整代码：

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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="['red','italic']">这是一个很大的H1,大到你无法想象</h1>

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

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

    <!--在为class用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带。属性的值是一个标识符 -->
    <h1 :class="classObj">这是一个很大的H1,大到你无法想象</h1>
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      isactive:true,
      classObj:{red:true,italic:true,active:false},
    },
  });
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^