1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <label>请输入您的名字:</label> <input type="text" v-model.lazy="name"> <p>{{ name }}</p> <label>请输入您的年龄:</label> <input type="text" @input="handlerChange"> <p>{{ age }}</p>
<span>请留言:</span> <p style="white-space: pre-line;">{{ message }}</p> <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" id="ropon" value="ropon" v-model="checkedNames"> <label for="ropon">ropon</label> <input type="checkbox" id="pengge" value="pengge" v-model="checkedNames"> <label for="pengge">pengge</label> <input type="checkbox" id="luopeng" value="luopeng" v-model="checkedNames"> <label for="luopeng">luopeng</label> <br> <span>选中人有: {{ 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 }}</span> <br>
<select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>选中的是: {{ selected }}</span> <br>
<select v-model="selected2" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>多选的是: {{ selected2 }}</span>
</div> <script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script> <script> let vm = new Vue({ el: "#app", data() { return { name: "ropon", age: 18, message: "测试文本域", checked: true, checkedNames: [], picked: "", selected: "", selected2: "" } }, methods: { handlerChange(e) { console.log(e.target); this.age = e.target; } } }); </script> </body> </html>
|