vue項目input標簽checkbox,change和click綁定事件的區別說明
input標簽checkbox,change和click綁定事件的區別
我們經常在vue開發項目的過程中，遇到需要對input框使用v-modal的這種情況，在有的時候，不光需要雙向數據綁定，還需要在改變數據之後綁定其它的操作，那麼問題來瞭，你是使用@change綁定事件還是使用@click綁定事件
建議不要通過click綁定事件，對待input標簽，最好通過change來觸發，本人血的教訓。
<input @change="inputchecked" class="goods-checked" v-model="shopcargoods[index].checked" type="checkbox" >
click執行的時間要早於change執行的時間，因為v-modal的時間是一個異步的。
當點擊之後，v-modal可能還沒有來得及將綁定在data裡面的數據改變，click綁定的事件就執行瞭，這會導致click綁定事件裡面拿到的data數據不是最新的。
change綁定的事件是一定要等到input框的value值改變之後才會被觸發。
關於這一系列的順序我是這樣理解
點擊input框–> click事件生效 –> v-modal改變綁定的data數據 –> 渲染到頁面上改變input的value值 –> change事件生效
input標簽中checkbox類型的相關操作總結
今天突然用到瞭input標簽裡的checkbox，發現還是有些概念不清不楚的，在這裡總結一下。
一、checked屬性
常用於input標簽裡type類型為checkbox和radio ，是一個Boolean屬性。規定在頁面加載時預先被選定。可以通過js代碼進行設置。
<input type="checkbox" name="hu" checked="checked"> <input type="checkbox" name="hu" checked=true> <input type="checkbox" name="hu" checked=false> <input type="checkbox" name="hu" checked=""> <input type="checkbox" name="hu" checked>
以上的幾種寫法，都會得到相同的結果，就是標簽被選中。 
這是因為在復選框裡隻要有checked屬性，不管是夠為其賦值，結果為空或true或false或任意值，均為選中狀態。
需要註意的是，在XHTML中禁止屬性最小化，所以必須定義為
<input type="checkbox" checked="checked">
二、操作
可以利用JS或Jquery操作checked的值：
var js_box1 = document.getElementById("box1").checked = true;
$("#box2").prop('checked',true); // 標準寫法 推薦
$("#box2").prop({checked: true}); // map鍵值對
$("#box2").prop('checked',function(){ // 通用寫法
return true;
});
$("#cb1").prop("checked","checked"); //不標準
$("#box2").attr('checked',true); // 不推薦
$("#box2").attr('checked','true'); // 不推薦
$("#box2").attr('checked','checked'); // 通用寫法
console.log('1:'+ box1.checked); // 1:undefind
在我使用的過程來看，強烈推薦使用.prop()方法進行設置或判斷是否選中的操作。（當然這是jQuery裡的方法）
因為在我開始想到的是用attr()方法，然後踩坑裡瞭…….用attr()設置復選框選中沒有問題，問題出現在判斷是否選中復選框。不管我選中還是沒有選中，返回的都是“undefind”。之後還用prop()就美滋滋。
console.log('1:'+ box1.checked); //1:true
console.log('2:'+ $("#box2").attr('checked')); //2:checked
$(document).on('click', '#box3', function(){
console.log('3:'+ $("#box3").attr('checked')); //3:undefined
});
$(document).on('click', '#box4', function(){
console.log('4:'+ $("#box4").prop('checked')); //4:checked
});
後來自己又研究瞭一下，發現如果不需要實時的監聽是否選中復選框的話，attr()和prop()都能得到結果，且attr返回:"checked"或"undefined"，prop 返回true/false。因為在我所使用的項目中，需要用戶點擊復選框選中以後，標簽欄就需要立刻做出反應，將對應的內容生成新標簽回顯給用戶。這時候使用attr('checked')在點擊事件下獲得checked屬性，就會一直返回undefind。具體原因在後面會有解釋，換成prop方法就不會出現這個問題。
還有一種方式也可以，就是 .is(':checked') // 返回true/false
補充一下，關於prop和attr方法的區別：
1.設置的屬性值類型不同
由於attr()函數操作的是文檔節點的屬性，因此設置的屬性值隻能是字符串類型，如果不是字符串類型，也會調用其toString()方法，將其轉為字符串類型。
prop()函數操作的是JS對象的屬性，因此設置的屬性值可以為包括數組和對象在內的任意類型。
2.jQuery認為：attribute的checked、selected、disabled就是表示該屬性初始狀態的值，property的checked、selected、disabled才表示該屬性實時狀態的值(值為true或false)。
即：
attr()獲取的是初始狀態的值，即使取消瞭選中，也不會改變。prop()獲取的值已經發生變化，是實時狀態的值。（這就是我上面出問題的原因啦）
三、關於checkbox的其他操作
1、設置第一個checkbox 為選中值
$("#chk1").find('input:checkbox:first').prop("checked",true);
$("#chk1").find('input:checkbox').eq(0).prop("checked",true);
2、設置最後一個checkbox為選中值
$("#chk1").find('input:checkbox:last').prop("checked",true);
3、根據索引值設置任意一個checkbox為選中值
$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); //索引值=0,1,2....
//或者
$("#chk1").find('input:checkbox').slice(0,2).prop('checked', true); //同時選中第0個和第1個checkbox
//從索引0開始（包含），到索引2（不包含）的checkbox
4、根據value值設置checkbox為選中值
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);
$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);
5、刪除checkbox：①刪除value=1的checkbox ②刪除第幾個checkbox
$("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除，將標簽從頁面上刪除瞭
$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
//如刪除第3個checkbox:
$("#chk1").find("input:checkbox").eq(2).remove();
6、選中所有奇數項或偶數項
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。