Directorio de artículos
Uso básico
<!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>
Modificador de forma
-
.number se convierte en un número
- punto importante:
- Cuando comienza a ingresar una cadena no numérica, porque Vue no puede convertir la cadena en un valor numérico
- Entonces, el valor del atributo se actualizará a la misma cadena en tiempo real. Incluso si ingresa un número más tarde, se tratará como una cadena de caracteres.
-
.trim filtra automáticamente el primer y último espacio en blanco ingresado por el usuario
- Solo se pueden eliminar el primer y el último espacio, no los espacios del medio.
-
.lazy Cambiar evento de entrada para cambiar el evento
- El modificador .lazy retrasa la oportunidad de actualizar el valor de la propiedad de forma sincrónica. Es decir, la lógica de sincronización vinculada originalmente al evento de entrada se cambia para estar vinculada al evento de cambio y
se actualiza cuando se pierde el foco o se presiona la tecla Enter.
<!-- 自动将用户的输入值转为数值类型 --> <input v-model.number="age" type="number"> <!--自动过滤用户输入的首尾空白字符 --> <input v-model.trim="msg"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > - El modificador .lazy retrasa la oportunidad de actualizar el valor de la propiedad de forma sincrónica. Es decir, la lógica de sincronización vinculada originalmente al evento de entrada se cambia para estar vinculada al evento de cambio y