vue3 class样式

48 阅读 0 评论 32 点赞

我是靠谱客的博主大气唇膏，最近开发中收集的这篇文章主要介绍vue3 class样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.数组
:class="[‘name1’,‘name2’]"
2.三元表达式
:class="[‘name1’,flag?‘name2’:’’]"
3.嵌套
:class="[‘name1’,{‘name2’:flag}]"
:class={name2:flag} 只有一个属性进行调用时，[]和“”去掉后效果相同，可能会出现bug，出项后再进行添加
4.使用对象
:class="{name1:true,name2:false}"

:class=“mybody”
mybody:{name1:true,name2:false}

5.直接使用
class=“name1 name2 name3”

使用[]的代码中的调用属性需要加单引号；使用{}中的属性可直接使用，都需要在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>

    <script src="./lib/vue.min.js"></script>

    <style>
    .big{
        font-size: 50px;
    }
    .small{
        font-size: 5px;
    }
    .blue{
        color: darkblue;
    }
    .italic{
        font-style: italic
    }
    
    </style>
</head>
<body>
    
    <div id="app">
         <h5 class="big  blue italic">H5大不大，瓦莱达</h5>

         <h5 :class=['big','blue']>H5大不大，瓦莱达</h5>

         <h5 :class=[flag?'big':'']>H5大不大，瓦莱达</h5>

         <h5 :class="[{blue:flag},'big']">H5大不大，瓦莱达</h5>

         <h5 :class="{big:true , blue:true}">H5大不大，瓦莱达555</h5>

         <h5 :class="mybody">H5大不大11111，瓦莱达</h5>

         <h5 :class={blue:flag}>瓦房大幅</h5>
    </div>

    <script>
    var vm = new Vue({
        el:'#app',
        data:{
           flag:true,
           mybody:{big:true , blue:true}
        },
        methods:{}

    })
    
    </script>

</body>
</html>

使用内联样式进行设置

1.使用style进行样式设置,进行绑定直接在对象上进行设置
:style="{‘color’:‘blue’,‘font-size’:‘75px’}"
color可以不加单引号，但是最好每个都加防止出现错误，不怕麻烦就怕bug

2.使用data进行设置
:style=“style1”
data:{
style1:{‘color’:‘blue’,‘font-size’:‘175px’}
}
3.从data中获得多个进行设置
:style="[style1,style2]"
data:{
style1:{‘color’:‘blue’,‘font-size’:‘175px’}，
style2:{‘color’:‘blue’,‘font-size’:‘175px’}
}

<!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>
    <script src="./lib/vue.min.js"></script>

    <style>
    .thin{
        font-size: 50px;
        font-weight: 100
    }
    .blue{
        color: darkblue;
    }
    .italic{
        font-style: italic
    }
    
    </style>

</head>
<body>

    <div id="app">
          

        <h1 class="blue italic">{{msg}}</h1>
        <h1 :class="['blue','thin']">{{msg}}</h1>
        <h1 :class="['blue',flag?'thin':'']">{{msg}}</h1>
        <h1 :class="['blue',{'thin':flag}]">{{msg}}</h1>
        <h1 :class="{blue:true,italic:true }">{{msg}}</h1>

        <h1 :class="mybody">{{msg}}</h1>
        <input type="text" name="" id="" v-model="msg">
          

        <h1 :style="{'color':'blue','font-size':'75px'}">好不好</h1>
        <h1 :style="style1">好不好</h1>
        <h1 :style="[style1,style2]">好不好</h1>
    </div>
    



    <script>
    var vm = new Vue({
       el:'#app',
       data:{
           msg:'我好腻害',
           msg1:'blue',
           flag:false,
           mybody:{blue:true,italic:true,thin:true },
           style1:{'color':'blue','font-size':'175px'},
           style2:{'font-style':'italic'}
       },
       methods:{
           show(){
               alert('dddd')
           }
       }
    })    
        
    </script>
</body>
</html>