Vue中的行内样式对象模式及其应用-优快云博客

本文链接：https://blog.youkuaiyun.com/babywenever/article/details/134697879

可以给行内进行动态样式绑定，可以设置的类型是对象，键名是传统的样式名称

1-小驼峰模式

<div class="demo" :style="{ backgroundColor: 'red ' }"></div>

2-中划线模式

<div class="demo" :style="{ 'background-color': color }"></div>

3-属性计算,计算的结果返回的仍旧是对象类型

<div class="demo" :style="myStyle"></div>

computed:{
 myStyle(){
     return {
         backgroundColor:this.color,
         width:this.width+"px"
      }
  }
}

4-数组模式

<div class="demo" :style="[myStyle,{height:width+'px'}]"></div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>行内样式对象模式绑定</title>
        <style>
            .demo {
                width: 100px;
                height: 100px;
                background-color: gray;
                display: inline-block;
                margin: 10px;
            }

            .red {
                background-color: red;
            }

            .green {
                background-color: green;
            }

            .blue {
                background-color: blue;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <div class="demo"></div>
            <!-- TODO:利用行内样式进行动态样式绑定处理，如果是对象模式，则需要注意键名键值的数据 -->
            <!-- 可以给行内进行动态样式绑定，可以设置的类型是对象，键名是传统的样式名称，
                可以写成小驼峰也可以写成中划线模式，
                但是中划线模式需要添加引名，而键值就是样式属性
            -->
            <!-- <div class="demo" :style="{ backgroundColor: 'red ' }"></div> -->

            <!-- 行内样式中对象的键值可以使用变量的形式 -->
            <div class="demo" :style="{ 'background-color': color }"></div>

            <!-- 虽然我们使用的是属性计算，但计算的结果返回的仍旧是对象类型 -->
            <div class="demo" :style="myStyle"></div>

            <!-- 行内样式也可以使用数组模式，数组中同样可以再结合对象内容 -->
            <div class="demo" :style="[myStyle,{height:width+'px'}]"></div>

            <p><input type="text" v-model="width"></p>
            <p><input type="text" v-model="color"></p>
            
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    attachRed: false,
                    width:100,
                    color:"gary"
                },
                computed:{
                    myStyle(){
                        return {
                            backgroundColor:this.color,
                            width:this.width+"px"
                        }
                    }
                }
            });
        </script>
    </body>
</html>