vue学习12-表单属性绑定 

 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>A</option>
17        <option>B</option>
18        <option>C</option>
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">多选1</label>
25         <input type="checkbox" value = "多选2" v-model="checkboxNames">
26         <label for="多选2">多选2</label>
27         <input type="checkbox" value = "多选3" v-model="checkboxNames">
28         <label for="多选3">多选3</label>
29         <span>多选：{{checkboxNames}}</span>
30    </div>
31 
32    <div id="el3">
33     <input type="radio" value = "单选1" v-model="picked">
34     <label for="单选1">单选选1</label>
35     <input type="radio" value = "单选2" v-model="picked">
36     <label for="单选2">单选2</label>
37     <input type="radio" value = "单选3" v-model="picked">
38     <label for="单选3">单选3</label>
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>

 

posted @ 2021-12-28 17:41  空谷近心  阅读(81)  评论(0)    收藏  举报