用Vue来实现通过后端数据渲染CSS样式

Question

城市-颜色条长短-值；这3个数据都是根据后台传过来的数据实时生成的，我不能写死。
后台数据是个json格式的，数据内容包括了城市名，颜色条的大小，值；都是对应好的，这个渲染实现代码改怎么写？

补充说明：1样式布局我自己没有问题，2大家可以理解为我不知道怎么用这个json数据，3如何获取这个数据放到样式里面，4使用Vue样式绑定的方式

Answer 1

html

<div id="app">
    <div v-for="item in infos">
        <div>{{ item.cityName }}</div>
        <div class="one" :style=item.length></div>
        <div>{{ item.num }}</div>
    </div>
 </div>

css

  .one {
    background: #444;
    height: 30px;
    }

js

  var app = new Vue({
        el: '#app',
        data: {
            infos: [
                { 'cityName': '长沙', 'length':"width:200px", 'num': 32 },
                { 'cityName': '武汉', 'length':"width:100px", 'num': 33 },
                { 'cityName': '南京', 'length':"width:50px", 'num': 34 }
            ]
        }
    });

样式要你自己去排一下了，这个东西是属于vue绑定数据，百度一下有一大堆的列子，看看就好

------更新------
如果length是这样写的话

'cityName': '武汉', 'length':100, 'num': 33 

行内样式就变为

<div class="one" :style="{width:item.length+'px'}"></div>

vue事件外的json数据

 var json = [
                    { 'cityName': '长沙', 'length':200, 'num': 32 },
                    { 'cityName': '武汉', 'length':100, 'num': 33 },
                    { 'cityName': '南京', 'length':50, 'num': 34 }
        ];
var app = new Vue({
    el: '#app',
    data: {
        infos: json,
    }
});

Answer 2

你这描述让别人怎么回答

没有字段格式
没有对应的渲染标签
回答 就是对应的字段 渲染对应的值呗

Answer 3

后台拿到数据。拼接样式字符串

styleStr='color:xxx,xxx:xxx';
//vue绑定
<div :style='styleStr'></div>