Vue基礎demo-表單綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p>表單輸入綁定：</p>
<div id="app">
多個複選框: 
<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="aa" value="aa" v-model="checkedNames">
<label for="aa">aa</label>
<p>{{checkedNames}}</p>
<hr>
單選按鈕: 
<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>
<span>Pick:{{picked}}</span>
<hr>
選擇框-單選: 
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected:{{selected}}</span>
<hr>
選擇框-多選(選擇時，按住Ctrl鍵，可以多選)： 
<select v-model="selecteds" multiple style="width:50px;">
<option>A</option>
<option>A2</option>
<option>A3</option>
</select>
<span>selecteds:{{selecteds}}</span><br>
用v-for渲染的動態選項：
<select v-model="selectedA">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span>selectedA:{{selectedA}}</span><hr>
值綁定-複選框： 
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
<span>toggle:{{toggle}}</span><hr>
值綁定-單選按鈕： 
<input id="boy" type="radio" v-model="pick" v-bind:value="a">
<label for="boy">男</label>
<input type="radio" v-model="pick" v-bind:value="b" id="girl"><label for="girl">女</label>
<span>pick:{{pick}}</span><hr>
值綁定-選擇框的選項
<select v-model="selectedB">
<option v-bind:value="{number:123}">123</option></select>
<span>selectedB:{{selectedB}}--selectedB.number:{{selectedB.number}}</span>
<hr>
修飾符
<input v-model.number="age" type="number" max="10" min="1">
<span>age:{{age}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
checkedNames:[],
picked:'',
selected:'',
selectedA:'',
selectedB:{},
selecteds:[],
options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'},],
toggle:'no',
pick:'',
a:'男',
b:'女',
age:15
}
});
</script>
</body>
</html>
