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_c...
·
首先,写个循环模板
<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里就可以了
感觉挺好用的,希望对别人有帮助
个中不足 望其指出 如有更好的方法 欢迎分享
更多推荐
已为社区贡献7条内容
所有评论(0)