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='http://www.intensediesel.com/bcjs/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)' /> <input type='button' value='<' @click='change_type(1)' /> </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' /> <ul class='contents'> <li 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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. XML入門的常見問題(四)2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享4. 解決ASP中http狀態(tài)跳轉(zhuǎn)返回錯(cuò)誤頁(yè)的問題5. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法6. xml中的空格之完全解說7. 無線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)8. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問題……9. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法10. WMLScript的語(yǔ)法基礎(chǔ)
網(wǎng)公網(wǎng)安備