vue里的样式添加之行间样式

一：行间样式：和绑定其他dom的属性一样， v-bind:style=

<div v-bind:style={backgroundColor:color}>2</div> //color是data或者computed的k；

<div v-bind:style='style1'>1<div> //整个style1是data的k或者computed的k

<div v-bind:style='[style1,{backgroundColor:"blue","200px"},style2]'>aaa</div>； //style的值是数组，里面的值是data或computed的k

   div {
            height: 100px;
             100px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-bind:style='style1'>1<div>
        <div v-bind:style='[style1,{backgroundColor:"blue","200px"},style2]'>aaa</div>
        <div v-bind:style='demostyle'></div>
        <button v-on:click='changeColor'>click</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               
                color: 'red',
                style2: {
                    fontSize: '30px',
                    fontWeight: 'bolder'
                }
            },
            computed: {//利用computed来获得，这厉害了，不但可以获取到值（computed的k和data里的k用法一样），
                        //而且节省了性能,一旦相关值变化，computed里的k会重新计算返回新的值
                style1: function () {
                    return {
                        height: '100px',
                         '100px',
                        backgroundColor: this.color //这一句如果在data里是获取不到this.color的
                    }
                }
            },
            methods: {
                changeColor: function () {
                    this.color = this.color == 'red' ? 'yellow' : 'red';
                }
            }

        })
    </script>