版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/dulinanaaa/article/details/80626557
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<br>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<input type="checkbox" value="Oscar" id="checkbox" v-model="checkedSingle">
<label for="checkbox">{{ checkedSingle }}</label>
<br>
<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>
<span>Checked names: {{ checkedNames }}</span>
<br>
<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>Picked: {{ picked }}</span>
<br>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<br>
<select v-model="selected1" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected1 }}</span>
<br><br>
<select v-model="selected2">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected2 }}</span>
<br>
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
<span>{{toggle}}</span>
<br>
<input type="checkbox" v-model="pick" v-bind:value="a">
<span>{{pick}}</span>
<br>
<input v-model.number="age" type="number">
<span>{{age}}</span>
<input v-model.trim="msg">
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
message: '',
checked: true,
checkedSingle: [],
checkedNames: [],
picked: '',
selected: '',
selected1: [],
selected2: 'B',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
toggle: "yes",
pick: '',
a: '',
age: '',
msg: ''
}
})
</script>
</body>
</html>