vue中样式获取data中的值

vue中样式获取data中的值

1、初学vue

初学vue开发时我们可以在模板中获取data的值

<template>
	<div>{{item}}</div>
</template>

那么，如果我在样式中又怎么获取data中的值呢？

2、vue2中样式获取data中的值

<template>
    <div>
        <div class="item" :style="styleColor"></div>
    </div>
</template>

<script>
    export default {
        name:'CheShi',
        data(){
            return{
                color:'red'
            }
        },
        computed:{
            styleColor(){
                return{
                    '--color':this.color
                }
            }
        }
    }   
</script>

<style scoped>
.item{
    width: 100px;
    height: 100px;
    background-color: var(--color);
}
</style>

2.vue3

1、选项式

<script >
  export default{
    data(){
      return{
        color:'red'
      }
    }
  }
</script>

<template>
 <div>
    <p class="text">测试文本</p>
  </div>  
</template>

<style scoped>
  .text{
    color: v-bind(color);
  }
</style>

2、组合式

<script setup>
  const style = {
    color:'red',
    fontSize:20+'px'
  }

  const {color,fontSize} = style
</script>

<template>
 <div>
    <p class="text">测试文本</p>
  </div>  
</template>

<style scoped>
  .text{
    color: v-bind(color);
    font-size:v-bind(fontSize)
  }
</style>