Vue v-bind动态绑定style

1.v-bind 一般简写为:

 <div id="app">
        <ul>
            <li v-for='(item,i) in text' :style ="{background:'red'}">索引值：{{i}}    内容：{{item}}</li>  
        </ul>
        <h2 :style="{background:color}">我是蓝色背景</h2>
    </div>

     var app=new Vue({
            el:"#app",
            data:{
                text:['1','2','3','4','5','6'],
                color:'blue'
            },
        })

此处用了两种方法
第一种 需要在red加上单引号，否则会当做一个变量去解析
第二种 不需要加单引号 而是在new Vue中增加了一个color 这时把color当做一个变量去使用

   <h2 :style="{fontSize:fonts + 'px'}">我是100px</h2>

var app=new Vue({
            el:"#app",
            data:{
             
                fonts:100
            },
        })

可能在编写是style中的内容会很多可以这样处理

  <h2 :style="getStyle()">{{message}}</h2>

  var app=new Vue({
            el:"#app",
            data:{
                message:'你好',
                color:'blue',
                fonts:100,
                
                },
                methods:{
                    getStyle:function(){
                        return {fontSize:this.fonts + 'px',color:this.color}
                    }
            },
        })

这样就可以了