Le contenu de cet article concerne l'analyse de l'instruction v-model dans Vue (avec code). Elle a une bonne valeur de référence et j'espère qu'elle pourra aider les amis dans le besoin.
1. Explication de la commande
v-model crée une liaison bidirectionnelle sur les contrôles ou les composants du formulaire. Il est essentiellement responsable de la surveillance des événements d'entrée de l'utilisateur (onchange, onkeyup, onkeydown, etc.). un en particulier, veuillez également consulter la documentation officielle d'implémentation sous-jacente) pour mettre à jour les données et effectuer un traitement spécial pour certains scénarios extrêmes.
2. Méthodes et méthodes de liaison de saisie de formulaire
2.1 Exemple de liaison de données bidirectionnelle pour la zone de saisie :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="text" v-model="inputs"/><br/>
<label>你在input框中输入了:</label><span>{{inputs}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
inputs: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
2.2 Implémentation de texte multiligne Textarea d'un exemple de liaison de données à double pensée :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><textarea v-model="text"></textarea><br/>
<label>你在textarea框中输入了:</label><span>{{text}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
text: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
2.3 Implémentation de case à cocher de la liaison de données
Single Exemple de liaison de données de case à cocher :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
<label v-if="checked">选中了:</label>
<label v-if="!checked">没选中:</label>
<span>{{ checked }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
Exemple de liaison de données de cases à cocher multiples :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label>
<input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
<input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
<input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
<br/>
<label>选中了：</label><span>{{ checkedValues }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checkedValues: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
2.4 Les boutons radio implémentent la liaison de données et la valeur du bouton radio sélectionné est obtenue et affichée :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<input type="radio" id="radio1" value="1" v-model="checked">男<br/>
<input type="radio" id="radio2" value="2" v-model="checked">女<br/>
<label> 选中了：{{ checked }}</label>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
2.5 Introduction à la zone de sélection
Méthode 1 : La zone de sélection implémente la liaison de données bidirectionnelle. Tout d'abord, nous introduisons la situation dans laquelle la zone de sélection implémente une seule sélection lorsque les options sont présentes. la zone de bouton radio est définie sur l'attribut désactivé, cette option ne peut pas être sélectionnée lorsque les options de la zone de bouton radio n'ont aucune valeur, le texte des options sera lié lorsque les options sont sélectionnées. ont une valeur, le texte des options sera lié lorsque les options sont sélectionnées. Définissez la valeur de cette option. L'exemple est le suivant :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
<. 🎜>
La méthode 2 introduit la situation de sélections multiples de la zone de sélection. Tout d'abord, vous devez ajouter l'attribut multiple à sélectionner. Lorsque les options de la zone du bouton radio définissent l'attribut désactivé, les options ne peuvent pas être. sélectionnée Lorsque les options de la zone du bouton radio n'ont aucune valeur, le texte des options sera lié lorsque les options sont sélectionnées. Lorsque les options du bouton radio sont sélectionnées, le texte des options sera lié lorsque les options dans la. case ont une valeur, lorsque cette option est sélectionnée, la valeur de cette option sera liée. Appuyez ensuite sur la touche ctrl et cliquez sur les options à sélectionner. Un exemple simple est le suivant :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected" multiple>
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
.
3. modificateur v-model
3.1 .lazy
Par défaut, v-model comparera la valeur de la zone de saisie avec les données après chaque saisie l'événement est déclenché la synchronisation.
(Sauf lorsque la méthode de saisie combine du texte). Vous pouvez ajouter le modificateur paresseux pour passer à l'utilisation
L'événement onchange est synchronisé. Lorsque les données sont saisies dans la zone de saisie, les données ne changeront pas immédiatement lorsque le curseur quitte la zone de saisie, les données seront modifiées de manière synchrone. L'exemple de code est le suivant :
<. 🎜>
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="text" id="names" v-model.lazy="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
3.2 .number
Si vous souhaitez convertir automatiquement la valeur d'entrée de l'utilisateur en un type numérique, définissez le type comme type numérique et ajoutez un numéro au modificateur v-model, lorsque l'utilisateur saisit des données de type numérique, v-model.number convertira automatiquement les données d'entrée en un type numérique. Notez que si l'utilisateur saisit la lettre spéciale e, l'attribut numérique ne peut pas être reconnu. Un exemple de code simple est le suivant :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="number" id="names" v-model.number="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
3.3 .trim
Si vous souhaitez filtrer automatiquement les caractères vides de début et de fin saisis par l'utilisateur, vous pouvez ajouter du trim au modificateur v-model, ajouter quelques espaces supplémentaires au début de la zone de saisie. Lorsque le curseur quitte, l'attribut trim filtrera automatiquement les espaces de fin A. Un exemple de code simple est le suivant :
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>无trim属性</label>
<input type="text" id="names" v-model="msg1" ><br/>
<label>输入值：</label>{{msg1}}<br/>
<label>有trim属性</label>
<input type="text" id="names2" v-model.trim="msg2" ><br/>
<label>输入值：</label>{{msg2}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg1: '',
msg2: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
4. Utilisez le modèle V dans les composants
.
4.1 自定义组件v-model
一个组件上的 v-model 默认会利用名为 value 的 prop
和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：
1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：
Vue.component('base-text', {
model: {
prop: 'value',
event: 'change'
},
props: {
checked: Boolean
},
template: `<input type="text" id="inputs" v-on:change="$emit('change', $event.target.value)">`
});
=Copier après la connexion
2. 在要使用该组件的插件中声明：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<base-text v-model="msg"></base-text><br/>
<label>你输入了:</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>Copier après la connexion
3. 结果示例如下：
相关推荐:
对4-v-bind指令的分析（附代码）
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
