vue項目input標簽checkbox,change和click綁定事件的區別是什么

本篇內容主要講解“vue項目input標簽checkbox,change和click綁定事件的區別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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); //選中所有奇數

到此，相信大家對“vue項目input標簽checkbox,change和click綁定事件的區別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！