vue自定义挑选内置组件

1.整合了第三方框架插件（选择2)

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' js/select 2/select 2。量滴CSS '/样式html，正文{ font : 13px/18px无衬线；}选择{最小宽度： 300像素；} /style /head body div id='el' p选中的： { { selected } }/p select 2 : options=' options ' v-model=' selected '/select 2/div脚本src=' http : js/jQuery-2。1 .4 .量滴js '/script script src=' http : js/select 2/select 2。量滴js '/script script src=' http :3358 cdnjs。cloudflare。com/Ajax/libs/vu//init select2 $(这$ El)。选择2({ data : this。选项}).价值.触发器("更改")。on('change '，function () { //在变化上发出事件。虚拟机$emit('input '，this.value) })，watch : { value : function(value){//update value $(this .$el).值trigger('change') }，options 3360 function(options){//update options $(this .$el).空()。选择2({ data : options })} }，所需的： function(){ $(this .$el).关闭()。选择2('销毁')})var VM=new Vue({ El : ' # El '，data: { selected: 2，options: [ { id: 0，text: '苹果}，{ id: 1，text: '香蕉}，{ id: 2，text: '香梨}，{ id: 3，text: '榴莲}，{ id: 4，text: '西瓜}]} })/脚本/正文/html 2 .简单挑选

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' style * { padd : 0；保证金： 0；} ul、李{列表式：无；}李{行高： 2em} Li :悬停{底色： # F9 F9 F9 f 9；边界半径：5像素；光标：指针；}输入{ cursor : pointroutline : none } # app { margin-top : 20px；} # app H2 { text-align : center；} .包装{ background-color: rgba(56，170，214，0.45)；边界半径： 20px宽度： 300像素；margin : 40pxpadding : 20px }输入[type=' button ']{ font-size :14 px；边距-左侧：2 pxpadding:2px 5px背景-color:rgb(228，33，33)；颜色：白色；border:1px实心rgb(228，33，33)；边界半径：5像素；} .clearFix { padding-left : }输入。关键字{ border : 1px solid # 777777边框半径： 10px高度： 30px宽度： 80%;左填充： 10pxfont-size : 16px} ul。列表{ margin : 20px 0；} ul。列表李{ padd : 10px 0 0 10px}/style/head body div id=' app ' div style=' float 3360 left；'氘自定义下拉框/h2自定义-选择BTN值='查询v-bind : list=' list 1 '/custom-select/div div style=' float : left；'氘自定义下拉框2/h2自定义-选择BTN值='搜索v-bind : list=' list 2 '/custom-select/div/div id=' app1 ' custom-select/custom-select/div脚本src=' http :http://cdnjs。cloudflare。com/Ajax/libs/vue/2。1 .3/vue。js /脚本脚本Vue.component('custom-select '，{ data(){ return { select SHow 3360 false，val:'' })，prop 3360 select SHow/input type=' button ' : value=' BTN值'/span/span/div custom-list v-SHow=' select SHow ' : list=' list ' v-: receive=' changevaluhandle '/custom-list/div/section `，methods : { changevaluhandle(value){ this。val=值；} } });Vue.component('custom-list '，{ prop :[' list ']，template : ` ul class=' list ' Li v-for=' list中的项' @ click=' selectValueHandle(item)' { { item } }/Li/ul `，methods : { selectValueHandle 3360 function(item){ this .$emit('receive '，item) } } }) new Vue({ el:'#app '，data:{ list1:['北京','上海','广州','杭州]，list2:['17-01-11 '，' 17-02-11 '，' 17-03-11 '，' 17-04-11']，} }) /script /body /html参考：

1.内置组件

总结

以上所述是小编给大家介绍某视频剪辑软件自定义挑选内置组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！