Vue實(shí)現(xiàn)穿梭框效果
用vue實(shí)現(xiàn)的穿梭框,實(shí)現(xiàn)基本的功能(數(shù)據(jù)移動(dòng)、全選、反選、搜索)。
代碼:
<!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}}項(xiàng) </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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue 通過(guò) Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 通過(guò) Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Element中使用ECharts的項(xiàng)目實(shí)踐
本文主要介紹了Element中使用ECharts的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)問(wèn)題及解決
這篇文章主要介紹了Vue父子組件方法this.$emit()有時(shí)候不觸發(fā)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled
最近在做項(xiàng)目的時(shí)候遇到了些問(wèn)題,所以這篇文章主要給大家介紹了關(guān)于Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled的解決方法,需要的朋友可以參考下2023-01-01