Vue.js中的绑定样式

时间:2017-08-10 04:02:56

标签: vue.js vuejs2

Vue.js的新手2.我试图在v-for循环中为每个div提供他们自己独特的风格。我究竟做错了什么?什么是实现我想要做的更好的方法?



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我想你忘了添加def _tnry(x,y,z): if len({x,y,z}) < 3: #at least two are the same: return (sorted([x,y,z])[1] + 1) % 3 。见下面的演示。

'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;
}