Vue---绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）

末蓝、 2024-04-07 11:31 42阅读 0赞

绑定样式

1.class样式

写法：class=“xxx” xxx可以使字符串、对象、数组

字符串法：适用于类名不确定，要动态获取

对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用

数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用

2.style样式

：style=“\{fontSize：xxx\}” 其中xxx是动态值

：style="\[a,b\]" 其中ab是样式对象，如下

![73e56c74294e4bb68b0be9afe760e74e.png][]

![c3bbea6399d9457da40fa8a5ef92fc1b.png][]

**目录**

一、绑定class样式

1.绑定class样式--字符串写法

2.绑定class样式--数组写法

3. 绑定class样式--对象写法

4.最终代码 案例：单击div实现变换心情（sad、normal、happy）

二、绑定style样式

1.方法一直接绑定法

2.方法二对象法

--------------------

## 一、绑定class样式 ##

### 1.绑定class样式--字符串写法 ###

###  ###

单击之后，下面这个框会随意变动

![96353913eb964b58aff62ff2cf0c3f53.png][]

![9d63b6db04bf409497abf2489d75124a.png][]

### 2.绑定class样式--数组写法 ###

适用于绑定的样式个数不确定，名字也不确定

下面这个一下次用了三个样式

![d2d781530c724e5dbbc2345c8808fd8b.png][]

### 3. 绑定class样式--对象写法 ###

适用于绑定的样式个数确定，名字也确定，但要动态决定用不用

data:{
                name:'尚硅谷',
                mood:'normal',
                classArr:['sad','normal','happy'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false
                }
            },
            methods: {
                changeMood(){
                
                const arr=['sad','normal','happy']
                // 现在只有0,1,2 这三个数
                this.mood=arr[Math.floor(Math.random()*3)]
                }
            },
    
            })

**在右侧root中进行修改**

![1cc301eb7e7d4def9d09564dd2fe3a63.png][]

### 4.最终代码 案例：单击div实现变换心情（sad、normal、happy） ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
            <style>
               .basic{
    				width: 400px;
    				height: 100px;
    				border: 1px solid black;
    			}
    			
    			.happy{
    				border: 4px solid red;;
    				background-color: rgba(255, 255, 0, 0.644);
    				background: linear-gradient(30deg,yellow,pink,orange,yellow);
    			}
    			.sad{
    				border: 4px dashed rgb(2, 197, 2);
    				background-color: gray;
    			}
    			.normal{
    				background-color: skyblue;
    			}
    
    			.atguigu1{
    				background-color: yellowgreen;
    			}
    			.atguigu2{
    				font-size: 30px;
    				text-shadow:2px 2px 10px red;
    			}
    			.atguigu3{
    				border-radius: 20px;
    			}
            </style>
        </head>
        <body>
            <div id="root">
                
               
              
               <div class="basic" :class="mood" @click="changeMood">{
       {name}}</div>
               <br>
               <br>
            
            <div class="basic" :class="classArr">{
       {name}}</div>
    
             
             <div class="basic" :class="classObj">{
       {name}}</div>
    
            </div>
              
    
           
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                mood:'normal',
                classArr:['sad','normal','happy'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false
                }
            },
            methods: {
                changeMood(){
                
                const arr=['sad','normal','happy']
                // 现在只有0,1,2 这三个数
                this.mood=arr[Math.floor(Math.random()*3)]
                }
            },
    
            })
    
    
        </script>   
    </html>

## 二、绑定style样式 ##

### 1.方法一直接绑定法 ###

data:{
                fsize:40,
                name:'尚硅谷',
               }

### 2.方法二对象法 ###

data:{
                styleObj:{
                    // fontsize是css样式中真实存在的
                    // 我们这个地方直接给一个值就好了
                    fontSize:'40px'
                },
               
                name:'尚硅谷',
             }

[73e56c74294e4bb68b0be9afe760e74e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9b2d024598eb4f568d9514194ead4b83.png
[c3bbea6399d9457da40fa8a5ef92fc1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5fee705749284c2a8b4449f67932b54c.png
[96353913eb964b58aff62ff2cf0c3f53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/42310c185c4242e5995e5940e77e6381.png
[9d63b6db04bf409497abf2489d75124a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1b430c360f2048cf9a38027e7f233171.png
[d2d781530c724e5dbbc2345c8808fd8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a3c7c2577d484082bbc2abab7d04bec4.png
[1cc301eb7e7d4def9d09564dd2fe3a63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/81035708a67543d18ce13ac819a2b8fd.png