基本用法
<!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">
<!--prevent 阻止默认事件-->
<form action="/login" @submit.prevent="submit">
用户名: <input type="text" v-model="username"> <br>
密码: <input type="password" v-model="password"> <br>
性别: <input type="radio" id="male" name="sex" v-model="sex" value="male"> <label for="male">男</label>
<input type="radio" id="female" name="sex" v-model="hobby" value="female"> <label for="female">女</label> <br>
爱好: <input type="checkbox" id="basket" v-model="hobby" value="basket"> <label for="basket"> 篮球 </label>
<input type="checkbox" id="foot" v-model="hobby" value="foot"> <label for="foot">足球</label>
<input type="checkbox" id="pp" v-model="hobby" value="pp"> <label for="pp"> 乒乓球 </label> <br>
城市: <select name="" id="city" v-model="city">
<option value="未选择">未选择</option>
<option value="sh">sh</option>
<option value="wh">wh</option>
<option value="gd">gd</option>
</select> <br>
<textarea name="" id="text" cols="30" rows="10" v-model="desc"></textarea> <br>
<input type="submit">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
username: '',
password:'',
sex: 'male',
hobby:[],
city:'gd',
desc:''
},
methods:{
submit(){
console.log(this.username, this.password, this.sex, this.hobby, this.city, this.desc)
}
},
})
</script>
</body>
</html>
表单修饰符
-
.number 转换为数值
- 注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
-
.trim 自动过滤用户输入的首尾空白字符
- 只能去掉首尾的 不能去除中间的空格
-
.lazy 将input事件切换成change事件
- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
在失去焦点 或者 按下回车键时才更新
<!-- 自动将用户的输入值转为数值类型 --> <input v-model.number="age" type="number"> <!--自动过滤用户输入的首尾空白字符 --> <input v-model.trim="msg"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > - .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上