vue3 class样式

最新推荐文章于 2024-04-18 09:14:23 发布

融图

最新推荐文章于 2024-04-18 09:14:23 发布

阅读量3.3k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xiangyang_csii/article/details/88350303

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

融图

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3 class样式

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

扫一扫