Vue.js中的綁定樣式

Vue.js中的新特性2.我試圖在v-for循環中爲每個div分配自己獨特的樣式。我究竟做錯了什麼？什麼是更好的方式來完成我想要做的事情？Vue.js中的綁定樣式

var tables = new Vue({ 
 
    el: '#table', 
 
    data: { 
 
    tables: [ 
 
    {name: 'iPhone', left:1, top:0}, 
 
     {name: 'Mac', left:150, top:0} 
 
    ] 
 
    } 
 
})

.table-div 
 
{ 
 
    width:100px; 
 
    height: 100px; 
 
    border:1px solid black; 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="table"> 
 
    <div v-for="table in tables"> 
 
     <div class="table-div" v-bind:style="{top: table.top, left: table.left}">{{table.name}}</div> 
 
    </div> 
 
    </div> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
</body> 
 
</html>

來源

2017-08-10 J Dub

我想你忘記了添加'px'。見下面的演示。

var tables = new Vue({ 
 
    el: '#table', 
 
    data: { 
 
    tables: [ 
 
    {name: 'iPhone', left:1, top:0}, 
 
     {name: 'Mac', left:150, top:0} 
 
    ] 
 
    } 
 
})

.table-div 
 
{ 
 
    width:100px; 
 
    height: 100px; 
 
    border:1px solid black; 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="table"> 
 
    <div v-for="table in tables"> 
 
     <div class="table-div" v-bind:style="{top: table.top + 'px', left: table.left + 'px'}">{{table.name}}</div> 
 
    </div> 
 
    </div> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
</body> 
 
</html>

來源

2017-08-10 04:17:33 choasia

哇...非常感謝！ –

Vue.js中的綁定樣式

回答

相關問題