Vue实现穿梭框效果

#代码知识发布时间： 2026-01-12

用vue实现的穿梭框，实现基本的功能（数据移动、全选、反选、搜索）。

代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>穿梭框</title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   
   #transfer {
    width: 388px;
    height: 218px;
    border: gray solid 1px;
    display: flex;
   }
   
   .container {
    margin: 10px;
    width: 150px;
    height: 200px;
   }
   
   #btns {
    width: 50px;
    height: 60px;
    margin: auto;
   }
   
   .to {
    margin: 0 10px 10px 10px;
    width: 30px;
   }
   
   .search {
    width: 140px;
    outline: 0;
    margin: 10px 0;
   }
   
   .content {
    list-style: none;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div id="transfer">
   <container :datas="contents" :type="0"></container>
   <div id="btns">
    <input type="button" value=">" @click="change_type(0)" class="to"/>
    <input type="button" value="<" @click="change_type(1)" class="to"/>
   </div>
   <container :datas="contents" :type="1"></container>
  </div>
  <script type="text/javascript">
   Vue.component('container', {
    props: ['datas', 'type'],
    data() {
     return {
      search_word: ''
     }
    },
    template: `
    <div class="container">
     <div class="top">
      <input type="checkbox" name="all" @click="all" :checked="filter_chosen === filter && filter"/>
      <span v-show="filter_chosen">{{filter_chosen}}/</span>{{filter_search_word}}项
     </div>
     <input type="text" placeholder="搜索" @keyup="change_search_word" class="search"/>
     <ul class="contents">
      <li class="content" v-for="(content, idx) in datas" v-show="content.type === type && has_search_word(content.content)">
       <input type="checkbox" @click="change(idx)" :checked="content.chosen"/>{{content.content}}
      </li>
     </ul>
    </div>`,
    methods: {
     change(idx) {
      this.datas[idx].chosen = !this.datas[idx].chosen;
     },
     all() {
      this.change_chosen(!(this.filter_chosen === this.filter));
     },
     change_chosen(bool) {
      this.datas.map(x => {
       if (x.type === this.type ) {
        x.chosen = bool;
       }
      });
     },
     change_search_word(e) {
      this.search_word = e.target.value;
     },
     has_search_word(content) {
      if (this.search_word) {
       return content.includes(this.search_word);
      }
      return true;
     }
    },
    computed: {
     filter() {
      return this.datas.filter(x => x.type === this.type).length;
     },
     filter_chosen() {
      return this.datas.filter(x => x.type === this.type && x.chosen).length;
     },
     filter_search_word() {
      return this.datas.filter(x => x.type === this.type && this.has_search_word(x.content)).length;
     }
    }
   });
   
   new Vue({
    el: '#transfer',
    data: {
     contents: [
      { content: 'a', type: 0, chosen: false },
      { content: 'b', type: 0, chosen: false },
      { content: 'c', type: 0, chosen: false },
      { content: 'd', type: 0, chosen: false },
     ]
    },
    methods: {
     change_type(type) {
      for (content of this.$data.contents) {
       if (content.chosen && content.type === type) {
        content.chosen = false;
        content.type = Number(!type);
       }
      }
     }
    }
   })
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

代码知识SEO

上一篇 : 详解MySQL数据库之触发器

下一篇 : Spring Boot 通过注解实现数据校验的方法

首页

关于我们

SEO服务

品牌推广

优化学院

联系我们

Vue实现穿梭框效果

SEO公司

SEO套餐

SEO教程

SEO资源

SEO建站

推荐阅读

docker容器中切换用户,提示权限不足

Python下载的11种姿势(小结)

Python监听键盘和鼠标事件的示例代码

Java序列化常见实现方法代码实例

Springboot mybatis p

Vue如何循环提取对象数组中的值

vue在图片上传的时候压缩图片

Opencv python 图片生成视频

C++17中的折叠表达式实现

Vue +WebSocket + Wav

微信小程序实现多张图片上传功能

springsecurity 基本使用详

解决Mybatis-plus找不到对应表

WIN10系统和Docker内部容器IP

calendar在python3时间中常

Java object wait not

Python 远程开关机的方法

如何在Express4.x中愉快地使用a

Linux上定位后台服务偶发崩溃的解决方

IDEA中用maven连接数据库的教程