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

首先，写个循环模板

<template>
  <section>
    <div class="one" v-for="item in items" :key="item.index">
      <div class="name_css">{{item.name}}</div>
      <div class="img_css"><img :src="item.img" :alt="item.text"/></div>
    </div>
  </section>
</template>
<script>
export default {
  name: "ceshi",
  data() {
    return {
      items: []
    };
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:3000/templatedata").then(res => {
        this.items = res.data;
      });
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>
<style scoped>
.name_css{
    display: inline-block;
    width: 20%;
    font-size: 30px;
    color: #22d7b8;
    vertical-align: top;
    text-align: center;
}
.img_css img{
    width: 50%;
    height: 200px;
}
.img_css{
    display: inline-block;
    width: 40%;
}
.one{
    margin: 20px auto;
    width: 90%;
}
</style>

附个效果图

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

贴个完整的例子

<template>
  <section>
    <div class="one" v-for="(item,index) in items" :key="item.index">
      <div v-if="index%2==0">
        <!-- 这里是根据索引值奇偶数来判断的，如果索引值除以二等0则使用此模板 那么只有偶数除以2会等于0，
        所以只要是奇数就使用下面V-else的模板-->
        <div class="name_css">{{item.name}}</div>
        <div class="img_css">
          <img :src="item.img" :alt="item.text" />
        </div>
      </div>
      <div v-else>
        <div class="img_css">
          <img :src="item.img" :alt="item.text" />
        </div>
        <div class="name_css">{{item.name}}</div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: "ceshi",
  data() {
    return {
      items: []
    };
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:3000/templatedata").then(res => {
        this.items = res.data;
        for (var i = 0; i < res.data.length; i++) {
          console.log(res.data[i].index);
        }
      });
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>
<style scoped>
.name_css {
  display: inline-block;
  width: 20%;
  font-size: 30px;
  color: #22d7b8;
  vertical-align: top;
  padding-left: 50px;
}
.img_css img {
  width: 100%;
  height: 300px;
}
.img_css {
  display: inline-block;
  width: 23%;
}
.one {
  margin: 20px auto;
  width: 90%;
  text-align: center;
}
</style>

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

从后台获取到得数据

"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里就可以了
感觉挺好用的，希望对别人有帮助
个中不足 望其指出 如有更好的方法 欢迎分享