Heim > Artikel > Web-Frontend > Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung
Der Inhalt dieses Artikels handelt von dynamischer Liste + dynamischem Stil (Code), der auf der bidirektionalen Bindung von Vue basiert. Ich hoffe, dass er für Sie hilfreich ist.
Zuerst die Darstellungen
Hinweis: Die folgenden Werte können von anderen Stellen bezogen werden, die ich schreibe Demonstration hier. Verdammt
Auf dem Logikdiagramm
Dann gehe zum Code
Vorlagenteil
Skriptteil
<template> <div> <div> <span>选择的选项:</span> <span>{{item}}</span> </div> //choose事件绑定写在最外层应用的js的事件委托,如果有不知道的可以参考我的一篇关于事件委托的文章 <div> <div>-1?activeclass:'']" :label="item.label" :value="item.value" style="margin: 5px auto;width: 100px;height: 38px;border:1px solid #e9eaec;line-height: 38px;border-radius: 5px;"> {{item.label}} </div> </div> </div> </template>
Stilteil
<script> export default { name: 'HelloWorld', data() { return { selectlistlabel:[], //用来展示是选项 selectlistvalue:[], //展示选项的值 list: [ //实际当中这部分数据为后台获取,现在为了方便写几个演示用 {value: 'New York',label: 'New York'}, {value: 'London',label: 'London'}, {value: 'Sydney',label: 'Sydney'}, {value: 'Ottawa',label: 'Ottawa'}, {value: 'Paris',label: 'Paris'}, {value: 'Canberra',label: 'Canberra'} ], } }, computed:{ activeclass: function() { return 'active' }, }, methods:{ choose:function(e){ let dom = e.target; //获取绑定在dom上的数据 var domvalue = dom.getAttribute("value"); var domlabel = dom.getAttribute("label"); //如果点到空白地方 if(dom.getAttribute("label") == null){ return; } //如果点击的对象的值已经在数组里面了,则把他从数组中删除 //否则就把他添加到数组里面去 if(dom.getAttribute("class") == "active"){ for(let i = 0;i<this.selectlistvalue.length;i++){ if(this.selectlistvalue[i] == domvalue){ this.selectlistvalue.splice(i,1) } } for(let i = 0;i<this.selectlistlabel.length;i++){ if(this.selectlistlabel[i] == domlabel){ this.selectlistlabel.splice(i,1) } } }else{ this.selectlistvalue.push(domvalue) this.selectlistlabel.push(domlabel) } }, } } </script>
Hinweis: Detaillierte Anweisungen sind im Code markiert
Fallstricke, die Aufmerksamkeit erfordern:
<style> .active{ background-color: #0ccfbf; color: white; } </style>
Verwandte Empfehlungen:
Detaillierte Erläuterung der bidirektionalen Bindung von Vue-Daten
Das obige ist der detaillierte Inhalt vonDynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!