vue 列表实现点击显示影藏

paulquei 发布于2019-08-20 16:45 / 3051人阅读

摘要：实现原理为每个列表项创建一个多带带的组件，然后每个组件都可以拥有自己的标志。

实现原理：为每个列表项创建一个多带带的组件，然后每个组件都可以拥有自己的isActive标志。

#js
Vue.component("toggle-list-item", {
  template: "#list-item",
  props: ["item"],
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
  data() {
    return {
      isActive: false
    }
  },
})

new Vue({
  el: "#app",
  data: {
    items: [{
      text: "foo",
      desc: "foo desc"
    }, {
      text: "bar",
      desc: "bar desc"
    }, {
      text: "baz",
      desc: "baz desc"
    }]
  }
});

GPU云服务器云服务器点击显示列表js代码 js实现点击菜单显示 VUE实现webrtc Vue实现分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83131.html

带你玩转Postman的集合

摘要：选择选项，可以添加名称和描述的数据，以便其他用户了解你的相关信息，如图创建一个新集合。如果用户正在处理一些特定的集合，可以单击图标将集合置顶，如图过滤集合。集合...

Bowman_han 2021-11-22 09:34 评论0 收藏0
从零开始实现一个Vue级联组件

摘要：从零开始实现一个级联组件本文实现级联组件需要用到自定义指令和组件通信相关知识，最好先阅读以下两篇文章自定义指令组件基础与通信一组件简介本文实现的是一个省市县多级联动组件，当组件渲染完成后默认会加载出所有的省名称，当用户点击某个省的名称后，右从零开始实现一个Vue级联组件本文实现级联组件需要用到自定义指令和组件通信相关知识，最好先阅读以下两篇文章: Vue自定义指令 Vue组件基础与...

binaryTree 2019-08-26 14:05 评论0 收藏0
vue keep-alive实现动态缓存以及缓存销毁

摘要：实现动态缓存以及缓存销毁需求来源及描述后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来是一个非常简单的后台管理系统布局，现在增加了菜单按钮点击左侧菜单栏时，右侧页面头部显示当前的页面标题，形成一个列表，点击可 vue keep-alive实现动态缓存以及缓存销毁需求来源及描述后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来...

littleGrow 2019-08-26 10:10 评论0 收藏0
Vue keepAlive 数据缓存工具，实现返回上一个页面浏览的位置；

摘要：需求分析背景数据列表页，滚动加载数据多条数据情况下，点击某一条，进入详细页进行编辑修改，删除操作保存返回上一页在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的解决办法原始的办法在点击详情页的时候，记住浏览位置，传递参数或者存到本需求分析背景：1.数据列表页，滚动加载数据；2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作；3.保存返回上一页；在上面的...

everfly 2019-08-26 18:27 评论0 收藏0