1 DOCTYPE html>
2 <html lang='en'>
3 <head>
4 <meta charset='UTF-8'>
5 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
6 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
7 <script src='https://unpkg.com/vue/dist/vue.js'>script>
8 <title>title>
9 head>
10 <body>
11 <div id='app'>
12
13 <div id="el1">
14 <select v-model="selected">
15 <option disabled value="">请选择：option>
16 <option>Aoption>
17 <option>Boption>
18 <option>Coption>
19 select>
20 <span>单选：{{selected}}span>
21 div>
22 <div id="el2">
23 <input type="checkbox" value = "多选1" v-model="checkboxNames">
24 <label for="多选1">多选1label>
25 <input type="checkbox" value = "多选2" v-model="checkboxNames">
26 <label for="多选2">多选2label>
27 <input type="checkbox" value = "多选3" v-model="checkboxNames">
28 <label for="多选3">多选3label>
29 <span>多选：{{checkboxNames}}span>
30 div>
31
32 <div id="el3">
33 <input type="radio" value = "单选1" v-model="picked">
34 <label for="单选1">单选选1label>
35 <input type="radio" value = "单选2" v-model="picked">
36 <label for="单选2">单选2label>
37 <input type="radio" value = "单选3" v-model="picked">
38 <label for="单选3">单选3label>
39 <span>单选：{{picked}}span>
40 div>
41
42
43 <div>
44 <input type="text" v-model.lazy="message">
45 <div>lazy鼠标离开输入框，才会显示输入的内容{{message}}div>
46 div>
47 <div>
48 <input type="text" v-model.number="message1">
49 <div>number自动去除非数字的内容{{message1}}div>
50 div>
51 <div>
52 <input type="text" v-model.trim="message2">
53 <div>trim自动去除首位空格{{message2}}div>
54 div>
55
56
57 <script>
58 new Vue({
59 el:'#app',
60 data:{
61 selected:"",
62 checkboxNames:[],
63 picked:"",
64 message:"",
65 message1:"",
66
67 message2:"",
68
69 }
70 }
71 )
72 script>
73 body>
74 html>