vue 中属性及样式的绑定

一、普通的绑定样式

直接在style中写好样式，然后直接在需要的地方使用class="定义的样式名称"就可以了

<template>
    <div class="green">
        你好 vue

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.green{
    width: 100px;
    height: 50px;
    background: rgb(212, 111, 16);
}
</style>

运行后展示下图

二、绑定动态的样式

在data中定义一个属性，然后在需要用到的地方使用 v-bind:class="属性名称"或者使用简写形式:class="属性名称"

<template>
    <div :class="myClass">
        你好 vue

    </div>
</template>

<script>
    export default {
        data(){
            return{
                myClass:"green",
            }
        }
    }
</script>

<style lang="scss" scoped>
.green{
    width: 100px;
    height: 50px;
    background:green;
}
</style>

三、绑定多个属性class
在data中定义属性是否显示，即bool类型，true的时候显示属性。在要使用的地方使用key-value的形式
:class="{'active':isActive,'green':isGreen}" 这个意思是isActive为 true的时候显示active样式，放在大括号里，多个属性使用逗号分开

<template>
    <div :class="{'active':isActive,'green':isGreen}">
        你好 vue

    </div>
</template>

<script>
    export default {
        data(){
            return{
                myClass:"green",
                isActive:true,
                isGreen:true
            }
        }
    }
</script>

<style lang="scss" scoped>

.active{
    display: block;
    font-size: 30px;
    color:red;
}
.green{
    width: 200px;
    height: 50px;
    background:green;
}
</style>

展示效果如下，两个都为true的时候，样式起作用

四、混合写法

普通写法与绑定动态属性写法一起使用也是可以的，代码如下

<template>
    <div class="green" :class="{'active':isActive}">
        你好 vue

    </div>
</template>

展示效果跟上图一样

五、使用数组形式绑定

将定义好的样式绑定到data里面的属性，然后，使用:class="[]"绑定多个属性，属性间用逗号分开

<template>
    <div :class="[isActive,isGreen]">
        你好 vue

    </div>
</template>

<script>
    export default {
        data(){
            return{
                isActive:"active",
                isGreen:"green"
            }
        }
    }
</script>

<style lang="scss" scoped>

.active{
    display: block;
    font-size: 30px;
    color:red;
}
.green{
    width: 200px;
    height: 50px;
    background:green;
}
</style>

六、数组与三元运算符结合判断选择需要的class

<div :class="[isActive?'active':'green']">  

解读：当isActive为 true 的时候展示 active 样式 ，false的时候展示 green 样式

七、数组对象结合动态判断

<div :class="[{active:isActive},'green']"> 

解读：展示green，并且 isActive 为 true 的时候 active 样式生效

八、判断是否绑定一个active样式

<div :class="{'active':isActive==1}"> 

解读：如果isActive=1 ，那么展示 active 样式

九、使用v-bind:style来绑定CSS内联样式

比如绑定颜色，字体大小等等，样式名称可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1、对象语法

    <!-- 1.基本使用：传入一个对象，并且对象内容都是确定的 -->
    <div :style="{color:'red',fontSize:'20px','background-color':'blue'}">Hello</div>

    <!-- 2.变量数据：传入一个对象，值会来自于data中定义的数据 -->
    <div :style="{color:myColor,fontSize:size}">Hello</div>

    <!-- 3.对象数据：直接在data中定义好对象，在这里直接使用 -->
    <div :style="styleObj">Hello</div>


data() {
        return {
          myColor: 'red',
          finalFontSize: 50,
          styleObj: {
            'font-size': '50px',
            fontWeight: 700,
            backgroundColor: 'red'
          }
        }
      }

2、数组语法

<div :style="[style1Obj, style2Obj]">Hello</div>

data() {
        return {
          message: "Hello World",
          style1Obj: {
            color: 'red',
            fontSize: '30px'
          },
          style2Obj: {
            textDecoration: "underline"
          }
        }
      }

注意点：
1.样式采用短横线分隔命名方式，需要使用单引号引起来，如 'background-color'
2.属性名冒号后面如果是一个颜色或者值，需要使用单引号，如果是data中定义的变量数据就不用引号，如 :style="{color:'red'}"