vue中属性及样式绑定

vue中属性及样式绑定

直接上代码 那个不会点哪里

<template>
  <div class="home">
      第一种直接写class
      <!--<div class="circle">//直接写class-->
      第二种使用data中属性动态绑定的样式
      <!--<div :class="className">//使用data中属性动态绑定样式-->
      第三种绑定多个class的方法
      <!--<div :class='{"circle":true,"text":show}'>//绑定多个class使用key-value的形式，其中true可以用data中定义的属性代替-->
      第四种混合写法
      <!--<div class="circle" :class='{"text":show}'>//混着写两种方式都可以一起使用-->
      第五种以数组的形式
      <!--<div :class='[dataCircle,dataText]'>//数组形式 数组里面的数据是data中定义好的-->
      第六种三元表达式
      <!--<div :class='[show?dataCircle:dataText]'>//数组形式就比较强大可以直接在这里面写三元 和对象等 此时show为true则使用dataCircle-->
      第七种数组和对象
      <!--<div :class='[{circle:show},"text"]'>//数组结合对象的形式-->
      绑定内联样式
      <!--<div :style='{"width": "100px","height": "100px","background-color": "pink"}'>//对象直接和css结合-->
      <div :style='{backgroundColor,color}'>//直接使用对象值为data中定义好的
          圆
      </div>
  </div>
</template>

<style lang="scss" scoped>
    .circle{
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50%;
    }
    .text {
        text-align: center;
        line-height: 100px;
        color: white;
    }
</style>

<script>
// @ is an alias to /src
import { defineComponent,ref } from 'vue'
export default defineComponent({
    name: 'Home',
    data(){
        return {
            backgroundColor:"pink",
            color:"red",
            size:{
                width: "100px",
                height:"100px",
                borderRadius:"50%",
            },
            className:"circle",
            password:123,
            show:true,
            dataCircle:"circle",
            dataText:"text",
        };
    },
    })

如有错误欢迎指正