当前位置：首页 > news >正文

vue语法---样式操作-行内样式

news 来源：原创 2025/5/28 3:21:01

文章目录

直接写死的行内样式
v-bind绑定对象(静态样式)
对象
数组

直接写死的行内样式

<template>
        <div v-bind:style="{color:'red'}">
            睡觉
        </div>
</template>
    
<script>
    export default{
        data() {
            return {
                
            }
        },

        methods:{

        }, 

        mounted(){

        },
    }
</script>
    
<style lang="css">
    
</style>

v-bind绑定对象(静态样式)

<template>
       <div v-bind:style="{color:color1}">
           睡觉
       </div>
</template>
   
<script >
   export default{
       data() {
           return {
               color1:"red"
           }
       },

       methods:{

       }, 

       mounted(){

       },
   }
</script>
   
<style lang="css">
   
</style>

对象

<template>
        <div v-bind:style="obj1">
        <!-- style的属性值是一个对象 -->
        
            睡觉
        </div>
</template>
    
<script >
    export default{
        data() {
            return {
                obj1:{
                    color:'red', 
                    fontSize:'30px'
                }
            }
        },

        methods:{

        }, 

        mounted(){

        },
    }
</script>
    
<style lang="css">
    
</style>

数组

<template>
        <div v-bind:style="[{color:'red'}, {fontSize:'30px'}]">
        <!-- // style的属性值是一个数组 -->
        
            睡觉
        </div>
</template>
    
<script >
    export default{
        data() {
            return {
                
            }
        },

        methods:{

        }, 

        mounted(){

        },
    }
</script>
    
<style lang="css">
    
</style>