01：v-model结合radio
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input type="radio" name="sex" value="男" v-model="sex">男<input type="radio" name="sex" value="女" v-model="sex">女您选择的性别是： {
{sex}}
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue ({el : '#app',data: {sex: '',}})
</script>
</body>
</html>
02:v-model结合checkbox使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--单选框--><!--<label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</label>您的选择是：{
{isAgree}}<button :disabled="!isAgree">下一步</button>--><!--多选框--><!-- <input type="checkbox" value="篮球" v-model="hobbies">篮球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球您的爱好是：--><!-- <ul><li v-for="hobbie in hobbies">{
{hobbie}}</li></ul>--><!--值绑定--><label for="thisHobbies" v-for="item in originHobbies"><input type="checkbox" :value="item" v-model="hobbies">{
{item}} <br></label>您选择的是： {
{hobbies}}
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue ({el : '#app',data: {isAgree: false,hobbies: [],originHobbies: ["篮球","羽毛球","乒乓球"],}})
</script>
</body>
</html>
03：v-model结合select使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--选中 1个--><select name="abc" id="" v-model="fruit"><option value="苹果">苹果</option><option value="橘子">橘子</option><option value="葡萄">葡萄</option></select>您选择的水果是：{
{fruit}}<!--选中多个--><select name="abc" v-model="fruits" multiple><option value="苹果">苹果</option><option value="橘子">橘子</option><option value="葡萄">葡萄</option></select>您选择的水果是：{
{fruits}}
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue ({el : '#app',data: {fruit: [],fruits: [],}})
</script>
</body>
</html>
04：v-model的修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--lazy--><!--实时的绑定--><input type="text" v-model="message"><!--敲回车的时候才进行绑定--><input type="text" v-model.lazy="message">{
{message}}<br><!--number--><!--以前我们只想让input标签输入字符串的时候虽然输入的数字 但是还是string类型加上.number就是number类型--><input type="number" v-model="age"><input type="number" v-model.number="age"><h2>{
{typeof age}}</h2><!--去掉左右两边的空格--><input type="number" v-model.trim="message">
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue ({el : '#app',data: {message: "嘻嘻嘻",age: '',}})
</script>
</body>
</html>