基於vue雙向綁定實現的動態清單+動態樣式(程式碼)
html
html5
javascript
這篇文章帶給大家的內容是關於基於vue雙向綁定實現的動態清單 動態樣式(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
先上效果圖
#註:下面的幾個值可以從其他地方獲取,這邊示範我是寫死的
在上邏輯圖
#接著上程式碼
template部分
<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>
登入後複製
script部分
<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>
登入後複製
style部分
<style> .active{ background-color: #0ccfbf; color: white; } </style>
登入後複製
註:詳細說明標註程式碼上了,
要注意的坑:
1.activeclass需要在computed里面把他return出来,否则加载不到样式。 2.对数组的操作方法,简单点使用vue支持的变异方法(否则vue无法检测到数组变化,也就无法动态绑定) 官网截了一小段图
登入後複製
相關推薦:
Angular與Vue雙向資料綁定的實作原理(重點是vue的雙向綁定)
以上是基於vue雙向綁定實現的動態清單+動態樣式(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
刺客信條陰影:貝殼謎語解決方案
1 個月前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
2 週前
By DDD
Inzoi:如何申請學校和大學
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)