1. The basic use of v -model
Form submission is a very common function in development and an important means of interacting with users:
- For example, the user needs to submit the account password when logging in or registering ;
- For example, when users retrieve, create, and update information, they need to submit some data;
These all require that we can obtain the data submitted by the user in the code logic , and we usually use the v-model instruction to complete:
- The v-model directive can create two-way data binding on form input , textarea and select elements ;
- It will automatically choose the correct method to update the element according to the control type ;
- Although somewhat magical, v-model is essentially just syntactic sugar , which is responsible for listening to user input events to update data , and performing some special processing in certain extreme scenarios;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.手动的实现了双向绑定 -->
<!-- <input type="text" :value="message" @input="inputChange"> -->
<!-- 2.v-model实现双向绑定 -->
<!-- <input type="text" v-model="message"> -->
<!-- 3.登录功能 -->
<label for="account">
账号:<input id="account" type="text" v-model="account">
</label>
<label for="password">
密码:<input id="password" type="password" v-model="password">
</label>
<button @click="loginClick">登录</button>
<h2>{
{message}}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
message: "Hello Model",
account: "",
password: ""
}
},
methods: {
inputChange(event) {
this.message = event.target.value
},
loginClick() {
const account = this.account
const password = this.password
// url发送网络请求
console.log(account, password)
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>2. The principle of v -model
The official said that the principle of v-model is actually that there are two operations behind it:
- v-bind binds the value of the value attribute ;
- v-on binds the input event to the function, and the function will get the latest value and assign it to the bound property;
In fact v-model is more complex
3. v -model binding textarea
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<textarea cols="30" rows="10" v-model="content"></textarea>
<p>输入的内容: {
{content}}</p>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
content: ""
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>4. v -model binding checkbox
Let's take a look at the v-model binding checkbox : single checkbox and multiple checkboxes
Single checkbox:
- v-model is a boolean value .
- At this time, the value attribute of input does not affect the value of v-model.
Multiple checkboxes:
- When there are multiple check boxes , because multiple check boxes can be selected, the corresponding attribute in data is an array .
- When one is selected, the value of the input will be added to the array .
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.checkbox单选框: 绑定到属性中的值是一个Boolean -->
<label for="agree">
<input id="agree" type="checkbox" v-model="isAgree"> 同意协议
</label>
<h2>单选框: {
{isAgree}}</h2>
<hr>
<!-- 2.checkbox多选框: 绑定到属性中的值是一个Array -->
<!-- 注意: 多选框当中, 必须明确的绑定一个value值 -->
<div class="hobbies">
<h2>请选择你的爱好:</h2>
<label for="sing">
<input id="sing" type="checkbox" v-model="hobbies" value="sing"> 唱
</label>
<label for="jump">
<input id="jump" type="checkbox" v-model="hobbies" value="jump"> 跳
</label>
<label for="rap">
<input id="rap" type="checkbox" v-model="hobbies" value="rap"> rap
</label>
<label for="basketball">
<input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<h2>爱好: {
{hobbies}}</h2>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
isAgree: false,
hobbies: []
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>5. V -model binds radio
v-model is bound to radio for selecting one of them;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="gender">
<!-- 在radio中，v-model绑定相同的值实现互斥 -->
<label for="male">
<input id="male" type="radio" v-model="gender" value="male"> 男
</label>
<label for="female">
<input id="female" type="radio" v-model="gender" value="female"> 女
</label>
<h2>性别: {
{gender}}</h2>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
gender: "female"
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>6. v -model binding select
Like checkbox, select is also divided into single selection and multiple selection.
Single choice: only one value can be selected
- v-model is bound to a value;
- When we select one of the options , its corresponding value will be assigned to the fruit;
Multiple selection: multiple values can be selected
- v-model is bound to an array;
- When multiple values are selected, the value corresponding to the selected option will be added to the array fruit ;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- select的单选 -->
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>单选: {
{fruit}}</h2>
<hr>
<!-- select的多选 -->
<select multiple size="3" v-model="fruits">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>多选: {
{fruits}}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
fruit: "orange", // 这里的默认值，就是单选框中默认选中的值
fruits: []
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>7. Value binding of v -model
At present, most of the values we have in the previous cases are fixed in the template :
- For example, the two input box values of gender are male and female;
- For example, the three input box values of hobbies are basketball , football , and tennis;
In real development, our data may come from the server , then we can first request the value , bind it to the object returned by data , and then bind the value through v-bind . This process is value binding set .
- No specific method is given here, because it is still the process of using v-bind .
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.select的值绑定 -->
<select multiple size="3" v-model="fruits">
<option :key="item.value"
:value="item.value"
v-for="item in allFruits">
{
{item.text}}
</option>
</select>
<h2>多选: {
{fruits}}</h2>
<hr>
<!-- 2.checkbox的值绑定 -->
<div class="hobbies">
<h2>请选择你的爱好:</h2>
<template :key="item.value" v-for="item in allHobbies">
<label :for="item.value">
<input :id="item.value" :value="item.value" type="checkbox" v-model="hobbies"> {
{item.text}}
</label>
</template>
<h2>爱好: {
{hobbies}}</h2>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
// 水果
allFruits: [
{value: "apple", text: "苹果"},
{value: "orange", text: "橘子"},
{value: "banana", text: "香蕉"},
],
fruits: [],
// 爱好
allHobbies: [
{value: "sing", text: "唱"},
{value: "jump", text: "跳"},
{value: "rap", text: "rap"},
{value: "basketball", text: "篮球"}
],
hobbies: []
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>8. v -model modifier
8.1、lazy
What does the lazy modifier do?
- By default, v-model binds the input event when performing two-way binding , then it will synchronize the latest value with the bound property after each content input;
- If we follow the v-model with the lazy modifier, the bound event will be switched to a change event , which will only be triggered when submitting (such as carriage return);
8.2、number
Let's first look at what type of value the v-model binds to:
message is always string type , even if we set type to number is string type ;
If we want to convert to a numeric type , we can use the .number modifier :
In addition, when we make logical judgments , if it is a string type , it will be converted implicitly if it can be converted :
The following score will be converted implicitly during the judgment process;
8.3、trim
If you want to automatically filter the guard blank characters entered by the user, you can add trim modifier to v-model :
8.4. Examples
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.lazy: 绑定change事件 -->
<input type="text" v-model.lazy="message">
<h2>message: {
{message}}</h2>
<hr>
<!-- 2.number: 自动将内容转换成数字 -->
<input type="text" v-model.number="counter">
<h2>counter:{
{counter}}-{
{typeof counter}}</h2>
<input type="number" v-model="counter2">
<h2>counter2:{
{counter2}}-{
{typeof counter2}}</h2>
<hr>
<!-- 3.trim: 去除首尾的空格 -->
<input type="text" v-model.trim="content">
<h2>content: {
{content}}</h2>
<hr>
<!-- 4.使用多个修饰符 -->
<input type="text" v-model.lazy.trim="content">
<h2>content: {
{content}}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
message: "Hello Vue",
counter: 0,
counter2: 0,
content: ""
}
},
watch: {
content(newValue) {
console.log("content:", newValue)
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>