vue动态设置盒子的高度,设置v-for循环出来的盒子的高度
最近有一个功能需求是点击某个循环出来的按钮,使当前点击的这个盒子的高度变高,以显示更多内容这四个盒子就是后台传来的数据,v-for出来的问题:如何点击当前盒子中的查看更多按钮,只改变当前盒子的高度,并且不影响其他盒子的高度方法:1.动态往后台返回的数组中的每一个对象添加一个属性,在mounted里面设置mounted() {this.machineList.forEach((item) =>
·
最近有一个功能需求是点击某个循环出来的按钮,使当前点击的这个盒子的高度变高,以显示更多内容
这四个盒子就是后台传来的数据,v-for出来的
问题:如何点击当前盒子中的查看更多按钮,只改变当前盒子的高度,并且不影响其他盒子的高度
方法:1.动态往后台返回的数组中的每一个对象添加一个属性,在mounted里面设置
mounted() {
this.machineList.forEach((item) => {
//动态向machineList中每个对象添加autoHeight属性
this.$set(item, "autoHeight", "1.8rem");
});
},
2.给每一个查看更多的按钮添加点击事件并且传入参数,参数为当前盒子的index值
<img
src="../assets/orderManage/btn_chakangengduo2@2x.png"
alt=""
class="see-more"
@click="seeMore(index)"
/>
3.编写切换高度的函数1.8rem为初始高度,5rem为你希望点击后的高度,index为了确定你当前点击的是哪个盒子
methods: {
seeMore(i) {
if (this.machineList[i].autoHeight == "1.8rem") {
this.machineList[i].autoHeight = "5rem";
} else {
this.machineList[i].autoHeight = "1.8rem";
}
},
},
更多推荐
已为社区贡献11条内容
所有评论(0)