データ(){
リターン{
リスト:[ //属性値FALEを追加
]、
//テストデータ
goList:[
{
名: 'ジョン・ドウ'、
電話:'18、621958665'
}、
{
名: 'ジョン・ドウ'、
電話:'18、621958665'
}、
{
名: '張ER'、
電話:'18、621958665'
}、
{
名: '李呉'、
電話:'18、621958665'
}
]、
routerList:[]
}
}、
//データ要求
getAjax(){
CONST = _thisこの
// _this.postRequest( ''、{}関数(データ){
//はconsole.log(データ、 '111')
// IF(データ){
// Data.Map(ヴァル=> {
falseに// = val.check;
// _this.list.push(ヴァル)
//})
//他{}
$ // _thisトースト({。
//メッセージ:「を選択してください人間の使用'
// DURATION:2000、
//クラス名:' 'noticeErrorToast
)} //;
} //
} //)
_this.goList.map(ヴァル=> {
val.check = falseに; //属性が追加
_this.list.push(ヴァル)
})
}、
//クリック選択し切り換える goChecked(項目、インデックス){ この_thisのconst =; // 2番目 。//この$セット(!項目を 'チェック'、item.check)//未定義の直接真に変換 //最初の種 item.check = item.check;! this.list.splice(インデックス,. 1、項目); //変更は、直流電流をオフにしていますが、交換する IF(item.check){ this.routerList.push(アイテム) 他{} this.routerList.splice(インデックス,. 1) } にconsole.log(this.routerListは) //選択された現在の値を取得 }
複数選択ボタンのクリックイベントのHTML:
<セクションクラス= "registrationList"> <ulのV-のための"リストの中(項目、インデックス)" =:キー= "インデックス"> の<div> <IMG SRC =」.. / .. / .. / .. /静的/ IMG /ショー/ checkedImg.png 'V-IF = "item.check" @クリック= 'goChecked(アイテム、インデックス)'/> <IMG SRC =' .. / .. / .. / .. /静的/img/show/noneChecked.png」V-IF = "!item.check" @クリック= 'goChecked(アイテム、インデックス)' /> </ div> <divの@ = "goEdit"をクリックしてください> <LIクラス=」 firstLi "> {{item.name}} </ LI> <LIクラス=" secondLi "> {{item.phone}} </ LI> </ DIV> </ UL> </ section>の
CSS:
.registrationList { 幅:100%。 ボックスサイズ:ボーダーボックス; パディング:20ピクセル20ピクセル20ピクセル0; } .registrationList UL { 幅:100%。 ボックスサイズ:ボーダーボックス; パディング:20ピクセル0; border-bottom:1pxの固体#f5f5f5; 表示:フレックス。 } .registrationList UL DIV:第一の型{ ディスプレイ:曲がります。 正当化-コンテンツ:センター; ALIGN-アイテム:センター; マージン右:20ピクセル; } .registrationList李{ 幅:100%。 ボックスサイズ:ボーダーボックス; 行の高さ:は50px; テキスト整列:左; } .registrationList IMG { 垂直整列:中央; 幅:36px; 高さ:36px; } .firstLi { フォントサイズ:34px; 色:ブラック。 } .secondLi { フォントサイズ:28px; フォントファミリ:PingFangのSC。 フォント重量:400; 色:RGBA(153,153,153,1)。 }