Vue的学习之路七：v-bind绑定class样式

最新推荐文章于 2024-04-29 15:00:49 发布

亥虫

最新推荐文章于 2024-04-29 15:00:49 发布

阅读量3.4k

点赞数

分类专栏： # Vue 文章标签： vue css html5

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106297284

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<style>
      .red{
        color: red;
      }
      .thin{
        font-weight: 200;
      }
      .italic{
        font-style: italic;
      }
      .active{
        letter-spacing: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 第一种使用方式，直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定-->
      <!-- <h1 :class="['red', 'thin', 'italic']">大大的H1</h1> -->

      <!-- 在数组中使用三元表达式 -->
      <!-- <h1 :class="[flag?'active':'', 'thin', 'italic']">大大的H1</h1> -->
      
      <!-- 在数组中使用对象来代替三元表达式，提高代码可读性 -->
      <!-- <h1 :class="['thin', 'italic', {'active': flag}]">大大的H1</h1> -->

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

    <script>
      var vm = new Vue({
        el: '#app', 
        data: { 
          classObj: { red:true, thin: true, italic: false, active: false }
        },
        methods: {
          
        }
      })
    </script>
  </body>

使用v-bind绑定class改变样式

['red', 'thin', 'italic']：直接传递一个数组，数组中的元素用引号括起来，会在style中寻找样式
三元表达式[flag?'active':'', 'thin', 'italic']：元素不加引号，会在Vue实例的data属性中寻找值
在数组中使用对象['thin', 'italic', {'active': flag}]：在Vue实例的data属性中寻找flag的值，根据flag的值决定是否加上active类名
为 class 使用 v-bind 绑定对象：对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没写引号，属性的值是一个标识符

亥虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路七：v-bind绑定class样式

<style> .red{ color: red; } .thin{ font-weight: 200; } .italic{ font-style: italic; } .active{ letter-spacing: 0.5em; } </style> </head> <body>
复制链接

扫一扫

专栏目录