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': '長(zhǎng)沙', 'length':"width:200px", 'num': 32 },
                { 'cityName': '武漢', 'length':"width:100px", 'num': 33 },
                { 'cityName': '南京', 'length':"width:50px", 'num': 34 }
            ]
        }
    });

樣式要你自己去排一下了，這個(gè)東西是屬于vue綁定數(shù)據(jù)，百度一下有一大堆的列子，看看就好

------更新------
如果length是這樣寫的話

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

行內(nèi)樣式就變?yōu)?/p>

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

vue事件外的json數(shù)據(jù)

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

你這描述讓別人怎么回答

沒(méi)有字段格式
沒(méi)有對(duì)應(yīng)的渲染標(biāo)簽
回答 就是對(duì)應(yīng)的字段 渲染對(duì)應(yīng)的值唄

后臺(tái)拿到數(shù)據(jù)。拼接樣式字符串

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