vue实现点击动态更换样式

左手的ㄟ右手 2024-04-17 16:06 129阅读 0赞

vue有一个很大的优点就是不用操作dom，极大的提高了性能，就像下面的实现点击动态绑定样式这个功能，相比js和jq就精简了很多。

html：

  1. <div class="type_div">
  2.     <span class="type_item"  :class="{ active:index==typeActive }" v-for="(item, index) in types" @click="changeTypeColor(index)">{
  3.    {item.msg}}</span>
  4. </div>

通过:class来绑定类，利用typeActive变量来实现是否绑定该类

data：

  1. typeActive: false,

methods:

  1. changeTypeColor:function(index) {
  2.       this.typeActive=index;
  3.  },

css:

  1. .active {
  2.     //设置自己想要的样式
  3. }

发表评论

表情：
评论列表 （有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读