跟着网上学Vue之样式绑定

柔情只为你懂 2023-07-20 13:53 149阅读 0赞

## class属性 ##

从某鸟教程里面发现一段代码，容易搞混  
在style中添加的样式：

.active { 
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    .text-danger { 
    	background: red;
    }

在body中添加的代码：

<div id="app">
      <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
      </div>
    </div>
    
    <script>
    new Vue({ 
      el: '#app',
      data: { 
        isActive: true,
    	hasError: true
      }
    })
    </script>

结果图：  
![在这里插入图片描述][2020040210394212.png]

*  一开始很纠结为什么是红色覆盖绿色，然后试了很多方法，突然想起来是“**就近原则**”，然后我就试着把style的样式顺序换一下，结果成功了。（**新手要注意了**）

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

此外，在通过vue设置class的时候，还可以通过对象传值  
某鸟教程说的：

new Vue({ 
      el: '#app',
      data: { 
        classObject: { 
          active: true,
          'text-danger': true
        }
      }
    })

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

## 数组设置class ##

//body中
    <div v-bind:class="[activeClass, errorClass]"></div>
    //script中
    new Vue({ 
      el: '#app',
      data: { 
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })

## 三元式设置class ##

//body中
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    //script中
    new Vue({ 
      el: '#app',
      data: { 
        isActive: true,
    	activeClass: 'active',
        errorClass: 'text-danger'
      }
    })

## 设置style ##

1.  普通设置style

//body内
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">教程</div>
    
    //script内
    new Vue({ 
      el: '#app',
      data: { 
        activeColor: 'green',
    	fontSize: 30
      }
    })

1.  单个样式对象设置style

//body内
     <div v-bind:style="styleObject">教程</div>
    //script内
    new Vue({ 
      el: '#app',
      data: { 
        styleObject: { 
          color: 'green',
          fontSize: '30px'
        }
      }
    })

1.  多个样式对象设置style

//body内
     <div v-bind:style="[baseStyles, overridingStyles]">教程</div>
     //script内
     new Vue({ 
      el: '#app',
      data: { 
        baseStyles: { 
          color: 'green',
          fontSize: '30px'
        },
    	overridingStyles: { 
          'font-weight': 'bold'
        }
      }
    })

**注意**：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

[2020040210394212.png]: /images/20230528/fe64d6645b5844b9b19def73da2f00bb.png