- v-modul:自動將Vue實例中定義的屬性與Dom表單組件的vaule屬性進行綁定。
- radio:默認與其邏輯值綁定,即:選定:true、取消選定:false,除非設置了value屬性。
- checkbox:對應的vue.data.someAttribute是一個Array類型,并會自動插入和刪除數組元素
- 如果:checkbox中設置了:v-model="toggle" v-bind:true-value="a" v-bind:false-value="b";
vue實例中設置了:toggle:'', a:'ValueA',b='ValueB',那么選中的時候:toggle=ValueA,反之為'ValueB'
- 如果:checkbox 中設置了:value="checkboxValue",v-model="toggle";
vue實例中設置了:toggle :[],那么選中的時候:toggle=['checkboxValue'],反之為:toggle=[]
- 如果:checkbox中設置了:v-model='toggle' ,vue實例中設置了:toggle:"",那么選中的時候:toggle=true,反之為:false;
- select:如果沒有設置value屬性,則默認取text值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<fieldset>
<legend>Input:</legend>
<input type="text" v-model="inputVal">
lazyInput : <input type="text" v-model.lazy="inputValLazy" />
<br>
<p>Input: {{ inputVal }}</p>
<p>inputValLazy: {{ inputValLazy }}</p>
</fieldset>
<fieldset>
<legend>Checkbox:</legend>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<p>checkbox: {{ checkedNames }}</p>
</fieldset>
<fieldset>
<legend>Radio:</legend>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<p>radio: {{ picked }}</p>
</fieldset>
<fieldset>
<legend>Select:</legend>
<select v-model="selected">
<option value="">---請選擇---</option>
<option value="A:這個是通過value設置的值">A</option>
<option>B:這個沒有設置value屬性,所以直接取了text</option>
<option value="選了C">C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</fieldset>
</div>
<script>
const vm = new Vue({
el : '#app',
data : {
inputVal : '',
inputValLazy : '',
checkedNames: [],
picked : '',
selected : ''
}
});
</script>
</body>
</html>
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。