Vue.js 表单绑定
Vue.js 表单绑定
Vue.js提供了
v-model 指令，可用于在表单上创建双向数据绑定输入，文本，文本区域和选择字段。
v-model 指令，可用于在表单上创建双向数据绑定输入，文本，文本区域和选择字段。
v-model指令会根据输入类型自动选择更新元素的正确方法。它通过绑定输入文本元素和绑定到分配的变量的值来提供双向数据绑定。 v-model指令内部使用不同的属性，并针对不同类型的输入元素发出不同的事件。通常，我们在表单输入绑定中使用三种类型的绑定:
文本框绑定: 在此绑定中，我们使用文本和textarea绑定value属性和输入事件。
单选框/选择框绑定: : 在此绑定中，我们使用复选框和单选按钮绑定被选中的属性并更改事件。
修饰符绑定: 在表单输入绑定示例中，我们也可以使用.lazy，.trim，.number等修饰符。
文本框绑定
让我们以一个简单的示例来演示文本区域绑定:
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>Textbox</h3>
<input v-model = "name" placeholder = "Enter your name.." />
<h3>Your name is: {{name}}</h3>
<hr/>
<h3>Textarea</h3>
<textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
<h1><p>{{textmessage}}</p></h1>
<hr/>
<h3>Checkbox</h3>
<input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
name:'',
textmessage:'',
checked : false
}
})
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
您可以看到文本框和文本区域现在为空。该复选框也未选中，并显示假值。现在，在文本框和文本区域中输入一些值，为v模型分配值名称，名称显示在{{name}}中，该名称显示在文本框中键入的内容。以同样的方式，将显示在textarea中写入的值。
单选框/选择框的绑定
让我们以一个简单的示例来演示广播和选择绑定:
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>Radio</h3>
<input type = "radio" id = "yes" value = "Yes" v-model = "picked"> Yes
<input type = "radio" id = "no" value = "No" v-model = "picked"> No
<h3>Radio element clicked: {{picked}} </h3>
<hr/>
<h3>Select</h3>
<select v-model = "languages">
<option disabled value = "">Please select one</option>
<option>Java</option>
<option>PHP</option>
<option>C</option>
<option>C++</option>
<option>JavaScript</option>
</select>
<h3>Your selected language is: {{ languages }}</h3>
<hr/>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
picked : 'No',
languages : "Java"
}
})
程序执行后，您将看到以下输出:
输出:
您可以看到默认选择的单选元素为No，选择的语言为Java。现在，您可以根据需要更改值。参见以下输出:
修饰符绑定
让我们看一个示例来演示全部三个修饰符
.trim，.number，和
.lazy 。
.trim，.number，和
.lazy 。
.number修饰符: : 当您希望自动将用户输入转换为数字时使用。它仅允许您输入数字。除了数字，它不需要任何其他输入。
<input v-model.number = "age" type = "number">
.lazy修饰符: : 仅在完全输入且用户离开文本框后，才用于显示文本框中的内容。默认情况下，v模型在每个输入事件之后将输入与数据同步。
<input v-model.lazy = "msg">
.trim修饰符: 该修饰符用于自动修剪用户输入中的空格。它将删除开头和结尾输入的所有空格。
<input v-model.trim = "message">
Index.html
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3> The .number modifier example</h3>
<span style = "font-size:20px;">Enter Age:</span> <input v-model.number = "age" type = "number">
<br/>
<br/>
<hr/>
<h3> The .lazy modifier example</h3>
<span style = "font-size:20px;">Enter Message:</span> <input v-model.lazy = "msg">
<h4>Display Message : {{msg}}</h4>
<br/>
<hr/>
<h3> The .trim modifier example</h3>
<span style = "font-size:20px;">Enter Message : </span><input v-model.trim = "message">
<h4>Display Message : {{message}}</h4>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js
var vm = new Vue({
el: '#databinding',
data: {
age : 0,
msg: '',
message : ''
}
})
程序执行后，您将看到以下输出:
输出:
您可以看到每个修饰符都是空的。现在，您可以输入任何值以查看结果，如下所示。
