Question

我的json数据是

{ "status": true,
  "data": {
    "pid": 9,
    "Name": "Asok",
    "services": "3, 1, 2, 4, 5, 6",
    "inventory": ["specs", " Testing", "Lens", "Doctors", "Surgeon", "Medicines"]
  }
}

现在我使用html作为

<div v-for="inv in data.inventory">{{inv}}</div>

当我这样做时，数据向下打印..我需要连续显示由公共分隔的数据吗？

Answer 1

.date-picker { position: absolute; z-index:1000;/*********** MY Change *************/ font-size: 1em; color: #CCC; text-align: center; cursor: default; border: 1px solid #444; border-radius: 2px; margin: 6px 0; background: #222; box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);}是一个块元素，因此请使用内联元素，例如div。至于逗号，将其添加到除最后一个元素之外的所有元素上，例如：

span

Working fiddle

Answer 2

您可以使用span而不是像

这样的div来实现

<span v-for="inv in data.inventory">{{inv}}, </span>

不幸的是，你最终会得到一个逗号： - /

也许这是你应该做一些JS预处理并保持模板简单的情况之一，例如：

<div>{{data.inventory.join(', ')}}</div>

这将毫不费力地解决尾随逗号问题。

Answer 3

您的代码display必须合适，div它是block，意味着它将获得整行的宽度。所以下一个元素将放在它下面。默认情况下，您可以使用div标记而不是span来设置彼此之后的值。或者您需要更改当前display元素的div属性。

<div>
   <span v-for="inv in data.inventory">{{inv}}</span>
</div>

让我用jQuery展示示例，而不是vue.js，但逻辑是相同的，它不是vue或jquery-s问题。

＆＃13;

const obj = { "status": true,
  "data": {
    "pid": 9,
    "Name": "Asok",
    "services": "3, 1, 2, 4, 5, 6",
    "inventory": ["specs", " Testing", "Lens", "Doctors", "Surgeon", "Medicines"]
  }
};

let str = '';

obj.data.inventory.forEach(ivt => {
  str += `<div>${ivt}</div>`;
});

$('#myFirstDiv').html(str);
str = '';

obj.data.inventory.forEach(ivt => {
  str += `<span>${ivt}</span>`;
});

$('#mySecondDiv').html(str);
str = '';

obj.data.inventory.forEach(ivt => {
  str += `<div class='inline-block'>${ivt}</div>`;
});

$('#myThirdDiv').html(str);

＆＃13;

div.inline-block {
   display: inline-block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
With divs
<div id='myFirstDiv'>

</div>
<br/>
With spans
<div id='mySecondDiv'>

</div>
<br/>
With changed display
<div id='myThirdDiv'>

</div>

＆＃13;

如何在vue js中用逗号分隔的库存中显示内容？

3 个答案: