v-for v-bind:class,动态改变li样式

纯css,伪类,伪元素

v-for v-bind:class,动态改变li样式_第1张图片
在对元素样式做改变时,非常方便,也可以结合v-for,一起使用,但仅支持几种方式:

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候

v-for v-bind:class

  • {{ item }}
  • v-for和v-bind:class也可结合使用。但有几点需要注意:
    1, v-bind:class="{onshow:true, onshow1:itemon[item]}",必须要加上静态css onshow,否则单独使用onshow1:itemon[item]是无效的。
    2,itemon[item]改变时不能直接使用this.itemon[item] = true,否则是无效的,必须使用this.itemon.splice(item, 1, true),(true可替换成false),具体原因尚未明了。

    此种方式可以支持change,click等,此方式可以和上一种共同使用。

    你可能感兴趣的:(vue,css,js)