vue中的class和style在行内中用发有几种

郑建零零发

已于 2022-08-05 14:51:10 修改

阅读量258

点赞数

分类专栏： js vue 文章标签： vue.js 前端

于 2022-07-22 17:20:18 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/125936308

版权

js 同时被 2 个专栏收录

86 篇文章 3 订阅

订阅专栏

vue

75 篇文章 2 订阅

订阅专栏

1.class的对象绑定

//actived这个类是否加载取决于isActive这个变量的true还是false
<div :class="{actived:isActive}"></div>

2. class和数组绑定，数组里可以有多个变量，变量代表类名

//类名取决于actived这个变量是什么
<div :class="[actived1, actived2,]"></div>

3.内联样式（对象形式）

(1).

<div id="app" :style="styleObj"></div>
<script>
    var vm = new Vue({
        data:{
           styleObj:{
              color:"red"
           }
        }
    })
</script>

(2).

<div :style="{'color': title == '探索' ? '#eee' : ''}"></div>

(3).

<div :style="`height: ${height}px`"></div>

4.内联样式（数组形式）

<div id="app" :style="[styleObj,{fontSize:'20px'}]"></div>
<script>
    var vm = new Vue({
        ata:{
            styleObj:{
                color:"red"
            }
         }
    })
</script>