<vue.js> 中对循环的目标的样式控制

最新推荐文章于 2022-05-07 11:32:19 发布

WWWWWWWWolf

最新推荐文章于 2022-05-07 11:32:19 发布

阅读量158

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/u/3883810/blog/1828191

版权

vue.js相信现在很多前端er都在使用，对于这样一个框架。很方便，但是对于初学来说，如果刚从jq的dom转换过来操作数据，可能有一点懵逼。现在有这样两个需求，看看如何来简单粗暴的理一理：

1、点击单个目标增加样式，其他的不增加

<ul>
  <li v-for="(v,k) in list" :class="{active:activeBtn==k }" @click="clickBtn(v,k)" :key="k">{{v}}</li>
</ul>

clickBtn(v,k){
this.activeBtn=k
}

则，每次li的时候，li的值都会等于下标，也就是当前的activeBtn==k是成立的，则会加上class

2、点击多个目标增加class并且再次点击取消class

数组中push一个标记selected:0 （标记为0，因为0=false,语义化比较强一点而已）--默认所有都不选中：

如下：


list:[{name:"john",age:10,selected:0},{name:"jack",age:11,selected:0}]

HTML代码如下：

<ul>
  <li v-for="(v,k) in list" :class="{active:v.selected==1 }" @click="clickBtn(v,k)" :key="k">{{v}}</li>
</ul>

点击事件如下：

clickBtn(v,k){

v.selected==0?v.selected=1:v.selected=0;

}

事件中判断，如果点击的目标selected为0,则赋值为1，成为选中状态，再次点击该目标-selected=1，则取消选中状态

至此，我们已经完成了开发中两种最常用的在循环列表中利用class来控制样式的方法

知道大家都比我聪明，毕竟我刚从操作dom转换到操作数据，还绕了很久

转载于:https://my.oschina.net/u/3883810/blog/1828191

关注