vue 多项收藏、取消收藏

效果
之后：点击星星，取消或者隐藏，可以选一个，可以选多个。perfect！

html代码（主要对class的样式进行操作）

 <span class="iconfont c-fs40 c-fc-gray books-6" :class="[!item.collect ? star : '']"  @click="toggle(index,item.collect)" >&#xe6d6;</span>

js代码

//循环数据，渲染到页面上
let tools=[
  {name:'用户即媒介，人就是节点',collect:'false',url:'www'},
  {name:'从数据化运营，到运营数据',collect:'false',url:'www'},
  {name:'小步快跑、快速迭代',collect:'false',url:'www'},
  {name:'媒介策略：整合营销传播',collect:'false',url:'www'},
  {name:'谈判不会这些套路，你就输定了',collect:'false',url:'www'}
]

data () {
return {
      star:'books-6-2',	//样式
      }
    }
  
  //方案一；
  //方案二：直接在@click事件中取反，具体：@click="item.collect=!item.collect" 
    methods: {
    toggle:function(index,collect){
        this.tool[index].collect=!this.tool[index].collect
    },
    }

css代码

.books-6-2{
    color: #ffe500;
    font-weight: bolder;
    font-size: 0.8rem;
}

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42277214/article/details/89927436
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 01:25:23
阅读 ( 694 )
分类：前端

vue 多项收藏、取消收藏

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看