使用Vue.js实现列表选中效果

Posted 庞国明 博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Vue.js实现列表选中效果相关的知识,希望对你有一定的参考价值。

 实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式,让active有选中高亮效果。但是谁说一定要用到jQuery呢。

  最近在做的项目中,我尝试脱离JQuery,绕过JQuery,我所接触的大部分项目中好像不使用JQuery无法进行开发一样。它确实给开发者提供了太多便利。以至于大部分web网站都依赖它运行着。据w3Techs统计,JQuery的市场份额高达94.9%,是时候脱离JQuery的束缚了。使用Vue.js更简洁,快速地实现。

  选中效果实现的核心实现逻辑是拷贝一份当前状态作为快照。比对列表的快照和当前的唯一索引,如果相同则视为选中。

Demo


技术分享图片

使用Vue.js实现


javascript

new Vue({
  el: "#app",
  data: {
    gameNames: [‘魔兽世界‘, ‘暗黑破坏神Ⅲ‘, ‘星际争霸Ⅱ‘, ‘炉石传说‘, ‘风暴英雄‘,
      ‘守望先锋‘
    ],
    activeName: ‘‘
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName
    }
  }
})

html

 
<div id="app">
  <div class="collection">
    <a href="#!" class="collection-item"
       v-for="gameName in gameNames"
       @click="selected(gameName)"
       :class="{active: activeName == gameName}">{{gameName}}</a>
  </div>
</div>

以上是关于使用Vue.js实现列表选中效果的主要内容,如果未能解决你的问题,请参考以下文章

Vue 学习笔记

web前端利用vue.js实现品牌列表的添加,删除与筛选功能

Vue.js实例:开发购物车

Vue.js实例:开发购物车

使用带有渲染功能的 Vue.js 3 片段

使用Vue实现点击事件变颜色并且显示选中文字