详解vuejs2.0 select 动态绑定下拉框支持多选(2)

<template> <div> <ul> <li v-for="(item, index) in selections" @click="toggleSelection(index)" :title="item.label" :class="{active: checkActive(index)}" >{{ item.label }}</li> </ul> </div> </div> </template> <script> import _ from 'lodash' export default { props: { selections: { type: Array, default: [{ label: 'test', value: 0 }] } }, data () { return { nowIndexes: [0] } }, methods: { toggleSelection (index) { if (this.nowIndexes.indexOf(index) === -1) { this.nowIndexes.push(index) } else { this.nowIndexes = _.remove(this.nowIndexes, (idx) => { return idx !== index }) } let nowObjArray = _.map(this.nowIndexes, (idx) => { return this.selections[idx] }) this.$emit('on-change', nowObjArray) }, checkActive (index) { return this.nowIndexes.indexOf(index) !== -1 } } } </script>

<style scoped> .chooser-component { position: relative; display: inline-block; } .chooser-list li{ display: inline-block; border: 1px solid #e3e3e3; height: 25px; line-height: 25px; padding: 0 8px; margin-right: 5px; border-radius: 3px; text-align: center; cursor: pointer; } .chooser-list li.active { border-color: #4fc08d; background: #4fc08d; color: #fff; } </style>

这里用到 lodash 因为vuejs2.0 放弃了$.remove 方法 可以通过lodash 方法解决

以上所述是小编给大家介绍的vuejs2.0 select动态绑定下拉框详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/195cfc9112a6012e4499899507e6aaef.html