ul根据后台添加li，并在点击li时，颜色随之变化

在我们大多数时候都是通过<ul><li>...</li></ul>来实现同级的加载，但是也用很多时候li里的内容是不固定的。需要根据后台返回数据来生成。

下面来说一下在vue中这种形式的做法；

首先在HTML中的代码如下

<ul>

        <li v-for="item in classify" :key="item.id"

        :class="activeClass == item.id ? 'active':''"

        @click.stop.prevent="changeCify(item)">

            {{ item.name }}

        </li>

</ul>

classify为后台返回的集合。也可以自己在data里写。咱们为了演示效果所以在data中的return里写出来。如下所示：

return {

      activeClass: ,

      classify: [{ id:, name:'共道' },{ id:, name:'个人代账'},

      { id:, name:'电商园区' },{ id:, name:'钉钉' },

      { id:, name:'app' },{ id:, name:'官网' },

      { id:, name:'阿里云' }, { id:, name:'阿里云市场' }],

}

还有我们的点击时执行的函数，写在methods中；如下

changeCify(item){

　　　　this.activeClass = item.id;

    console.log(item)

}

这样就全部完成了，包括了v-for 加载li，和点击方法 changeCify(item) 。和颜色的自动切换 :class="activeClass == item.id ? 'active':''" 。就是这些。希望对你有帮助

巴特西

ul根据后台添加li，并在点击li时，颜色随之变化

最新文章

热门文章