Question

我通过遍历Nativescript-Vue中的数组来打印一些标签。我希望标签排列在网格中。这是我的模板：

<GridLayout columns="auto,auto" rows="auto,auto">
  <label
    v-for="(item, index) in items"
    :text="item"
    :key="index"
  />
</GridLayout>

这是items数组：

export default {
  data() {
    return {
      items: ["A", "B","C","D","E","F"]
    }
  }

如何动态地将row和column属性分配给<label>？我可以手动完成操作，但随后将无法遍历整个数组。我希望它井然有序，例如

A | B

C | D

E | F

Answer 1

使用计算属性可根据项目数计算行数。然后根据索引将每个Label的行和列绑定。

$(function(){
    $.w = $(window);
    $.w.on('load resize', res);
    res();
});

function res() {
    $('.content').css('height',($.w.innerHeight()/2)+'px');
}

Playground Sample

如何在GridLayout中动态排列项目？

1 个答案: