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: 1,
      classify: [{ id:1, name:‘共道‘ },{ id:2, name:‘个人代账‘},
      { id:3, name:‘电商园区‘ },{ id:4, name:‘钉钉‘ },
      { id:5, name:‘app‘ },{ id:6, name:‘官网‘ },
      { id:7, name:‘阿里云‘ }, { id:8, name:‘阿里云市场‘ }],
}

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

changeCify(item){   

    this.activeClass = item.id;

    console.log(item)
}

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

原文地址:https://www.cnblogs.com/wzfwaf/p/11755235.html

时间: 2024-10-31 11:51:21

ul根据后台添加li,并在点击li时,颜色随之变化的相关文章

dede后台添加优酷等视频iframe链接时被替换成了图片

添加文章时 添加优酷视频 :<iframe height=498 width=510 src='http://player.youku.com/embed/XNDAzNTAzODE4OA==' frameborder=0 'allowfullscreen'></iframe> 提交后被替换成 <iframe frameborder="0" height="498" src="/uploads/allimg/190128/1U9

jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码

转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元素后插入指定的内容. 综合起来,核心代码为 $(".content li").click(function() {       // 点击li元素时     if($(this).next())                    // 如果存在下一个元素         $(this)

JFinal Web开发学习(九)后台添加前台显示博客

效果: 发博客: 显示博客: 后台:使用hui-admin,文章编辑器是百度开源的ueditor 前台:使用layui前端框架 1.写控制器BlogController controller包中 package cn.pangpython.controller; import com.jfinal.core.Controller; import cn.pangpython.model.Blog; import cn.pangpython.utils.DateUtils; /** * @autho

Vue 商城的一些小demo(后台添加商品、前台购物车、本地存储的使用)

demo   商城后台,添加一种商品 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> </head> <body> <div id=&

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selecte

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selected

搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的settings中添加‘ckeditor’的app (3).配置models 将需要用到富文本编辑器的字段改成RichTextField 上面三步配置过后是不能上传图片的,下面配置上传图片的功能. (4).安装pillow库 pip install pillow (5).注册应用 添加'ckeditor_u

Echsop在前台公告里调用后台添加的QQ和旺旺的方法。

求在前台公告或添加一个广告位,调用后台添加的QQ和旺旺的方法. 我在page_footer.lbi里找到了代码--=================================<!-- QQ 号码 {foreach from=$qq item=im} -->      <!-- {if $im} -->      <a href="http://wpa.qq.com/msgrd?V=1&Uin={$im}&Site={$shop_name}&am

ECshop网点程序优化-后台添加类目自动选择上次父类目并计算Sort Order

如果在ECshop后台批量添加过大量类目的人都能体会到是多么的不方便(这点还是要说一下ECshop的产品经理,细节上还是要多注意),每次添加都需要在几百个类目里面找到要添加的父类目也是一个麻烦事,比如我的 Tao Fashion 站,里面一共有400多个类目 每次添加一个新类目,即使是同一父类目下的,都需要从头再找一遍,非常不方便,设置类目的顺序的时候,也要自己记着这个父类目下已经添加几个了,记着下一个添加的时候+1,经常弄错. 咱是新人类,要用技术的办法解决这个问题,实现在Category L