- 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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
