Question

我有这个简单的标记：

<div v-for="(node, index) in nodes" :key="index + 1">
   <p>This is a paragraph</p>
</div>

与此相关：

new Vue({
  el: '#app',
  data: {
    nodes: [{
      left: 0,
      top: 0
    }],
  },
  addNode: function(position){
    this.nodes.push(position)
  }
})

现在，当我调用addNode（...）时，我希望将元素与传递的样式一起插入（在这种情况下，控制位置）。

我尝试过这种方式：

<div v-for="(node, index) in nodes" :key="index + 1" :style="{ 'left': note.left, 'right': note.right }">
  <p>...</p>
</div>

但这似乎并没有太大作用。

我想念什么？

谢谢！

Answer 1

您忘了在值后面添加单位。

<div v-for="(node, index) in nodes" :key="index + 1" style="position:absolute" :style="{ 'left': note.left + 'px', 'right': note.right + 'px'}">
  <p>...</p>
</div>

JS小提琴：https://jsfiddle.net/eywraw8t/140109/

Answer 2

尝试一下，我使用颜色作为样式属性来轻松查看效果。但是，与位置相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="(node, index) in nodes" :style = "node">
      <p>This is a paragraph</p>
   </div>
   <button @click="addNode({color: 'blue'})">Add Node</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      nodes: [{
        left: 0,
        top: 0
      }],
    },
    methods:{
      addNode: function(position){
        this.nodes.push(position)
      }
    }
  });
</script>
</html>

希望有帮助

VueJS-更改推送数组元素的样式

2 个答案: