At the beginning, the corresponding data in the model layer is assigned to the data bound to v-model. When the view layer triggers some time to cause the bound data to change, the data in the model layer will also change.
5.1 Input box application
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="mes" />{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>Operation results: Initially, the "lucky" in the model layer is transferred to the input box. When the page is opened, the input box displays "lucky". When the view layer changes, the input data will be passed to mes, causing the data in the model layer to also change.
5.2 Multi-line text control application
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<textarea v-model="mes"></textarea>{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>operation result:
5.3 Radio button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
性别：
<input type="radio" value="男" v-model="mes" />男
<input type="radio" value="女" v-model="mes"/>女
<hr/>
性别：{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "222",
},
})
</script>
</body>
</html>Running results: Start with the model layer, the mes data is 222, and then bind it to each radio button. If the value of the radio button itself is also equal to 222, the radio button will become selected! In the view layer, if someone clicks on the radio button with the value "male", the value "male" will be passed to mes, and the mes in the model layer will also change accordingly.
5.4 Drop-down box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<select v-model="mes">
<option value="" disabled>请选择</option> <!-- disabled表示该选项被禁用-->
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<hr />
value:{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: '',
},
})
</script>
</body>
</html>operation result:
PS: If the initial value of mes is A, when accessing the page, the drop-down box will automatically select A. Because, after binding, if the initial value of the data in the model layer is the same as that in the view layer, it is equivalent to selecting this option.