Vue.jsでのバインディングスタイル

Vue.jsの新機能2.私は、各divにv-forループで独自のスタイルを与えようとしています。私は間違って何をしていますか？私がやろうとしていることを達成するためのより良い方法は何ですか？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でのバインディングスタイル

答えて

関連する問題