示例程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="Vue-v2.5.22.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h2>1.Text</h2>
<div>
<input type="text" v-model="message">
<span>Your input is: {{message}}</span>
</div>
<h2>2.Radio</h2>
<div>
<input type="radio" value="male" v-model="gender">男
<input type="radio" value="female" v-model="gender">女
<p>{{gender}}</p>
</div>
<h2>3.Checkbox</h2>
<div>
<span>單選勾選框</span>
<input type="checkbox" v-model="checked">
<span>checked: {{checked}}</span>
</div>
<div>
<span>多選勾選框</span>
<input type="checkbox" value="1" v-model="multiChecked">1
<input type="checkbox" value="2" v-model="multiChecked">2
<input type="checkbox" value="3" v-model="multiChecked">3
<input type="checkbox" value="4" v-model="multiChecked">4
<span>multiChecked: {{multiChecked.join('|')}}</span>
</div>
<h2>4.Select</h2>
<div>
<span>單選</span>
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>selected: {{selected}}</span>
</div>
<div style="margin-top:20px">
<span>多選</span>
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select><br>
<span>multiSelected: {{multiSelected.join('|')}}</span>
</div>
<h2>5.綁定value</h2>
<div>
<p>1). Checkbox</p>
<input type="checkbox" v-model="checked" :true-value="a" :false-value="b">
<span>checked: {{checked}}</span>
</div>
<div>
<p>2. Select Option</p>
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
<span>selected: {{selected.number}}</span>
</div>
<h2>6.參數特性</h2>
<div>
<!-- v-model.trim: 去除收尾空格 -->
<input type="text" v-model.trim="message">
<span>Your input is: [{{message}}]</span>
</div>
<div>
<!-- v-model.lazy: change事件中同步 -->
<input type="text" v-model.lazy="message">
<span>Your input is: [{{message}}]</span>
</div>
<div>
<!-- v-model.number: 輸入自動轉換成Number類型 -->
<input type="text" v-model.number="message">
<span>Your input is: [{{message}}] typeof [{{typeofMessage}}]</span>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '',
gender: '',
checked: '',
multiChecked: [],
selected: '',
multiSelected: [],
a: 'a value',
b: 'b value'
},
computed: {
typeofMessage: function () {
return typeof this.message;
}
}
});
</script>
</body>
</html>
