Vue 通过V-if和V-else指令来判断索引值奇偶数达到对模板位置的选择及变换 记录一下

首先，写个循环模板

附个效果图

可以看到上图跑出来是这个样子，顺序都是一致的，左边是字，右边是图片。但如果是顺序需要根据索引值来变化呢，就如下图这样，只有雪碧改变了位置，而且是只要索引值为奇数的，都是这样，而索引值为偶数的则和可乐一个顺序。这就利用到V-if 和V-else指令。

贴个完整的例子

其实就是根据索引值的奇偶来判断该使用哪个模板，附加多几条数据看看效果图

从后台获取到得数据

"templatedata":[
    {
      "index":0,
      "name":"可乐",
      "img":"/static/QJ6704577514.jpg",
      "text":"图片不见啦"
    },
    {
      "index":1,
      "name":"雪碧",
      "img":"/static/FgVrtZkoWdTHj3nFVZtXJc1fzz8z.jpg!730x0.jpg",
      "text":"图片不见啦"
    },
    {
      "index":2,
      "name":"橙汁",
      "img":"/static/256786-1G03021423887.jpg",
      "text":"图片不见啦"
    },
    {
      "index":3,
      "name":"足球",
      "img":"/static/timg.jpg",
      "text":"图片不见啦"
    },
    {
      "index":4,
      "name":"篮球",
      "img":"/static/timg (3).jpg",
      "text":"图片不见啦"
    },
    {
      "index":5,
      "name":"橄榄球",
      "img":"/static/timg (2).jpg",
      "text":"图片不见啦"
    }
  ]

如果不从后台拿就直接写在items里就可以了
感觉挺好用的，希望对别人有帮助
个中不足 望其指出 如有更好的方法 欢迎分享