问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

v-for如何设置步长呢？？

头像
ufdf
    6.7k83602709

    v-for

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue-For</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
    <div>
        <ul id="example-2">
          <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
          </li>
        </ul>
    </div>

    <script type="text/javascript">
        var example2 = new Vue({
          el: '#example-2',
          data: {
            parentMessage: 'Parent',
            items: [
              { message: 'Foo' },
              { message: 'Bar' },
              { message: 'meng' },
              { message: 'hang' },
              { message: 'game' },
            ]
          }
        })
    </script>
</body>
</html>

    问题

    如何让v-for的时候，index += 2，文档里未发现，或者说我这样的想法可以变通？？

    vue.jsvue-router
    阅读 10.6k
    4 个回答
    得票最新
    头像
    fuqihan
      1.1k1315

      每个items加个flag也可以实现...

      额....v-for又没有回调函数，只能在数据里做判断，加个flag判断那个值要不要没什么错的啊...
      特殊需求可以自己写个directives 来实现，不用v-for，或者reder也行....

      头像
      luozz
        5.8k3629

        仅修改了div那部分，复制替换便可看到效果，希望能帮助到你：

        <div>
    <ul id="example-2">
        <li v-for="(item, index) in items" v-if="index%2 === 0">
            {{ parentMessage }} - {{ index }} - {{ item.message }} -奇数条数据-
            <span v-if="items[index + 1] != undefined">{{ parentMessage }} - {{ index + 1 }} - {{ items[index + 1].message }}</span>
        </li>
    </ul>
</div>
        头像
        Yawenina
          2.3k27
          头像
          ufdf
            6.7k83602709

            思考

            这个问题不应该在渲染的时候去解决，应该对数据重组

            例子

            function getData(list) {
    var res = [];
    var count = 0;
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        if (i % 2 === 1) {
            res[count].push(item);
            count++;
        } else {
            res.push([]);
            res[count].push(item);
        }
    }
    return res;
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            被 1 篇内容引用
            推荐问题
            宣传栏