recherche

Maison >interface Web >js tutoriel >Explication détaillée des exemples de liaison de données bidirectionnelle Vue

Explication détaillée des exemples de liaison de données bidirectionnelle Vue

php中世界最好的语言
php中世界最好的语言original
2018-06-13 09:25:582139parcourir

Cette fois, je vais vous apporter une explication détaillée des exemples de liaison de données bidirectionnelle Vue. Quelles sont les précautions à prendre pour la liaison de données bidirectionnelle Vue ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Description du concept

Directive v-model : crée une liaison de données bidirectionnelle sur les éléments de contrôle du formulaire. v-model choisira automatiquement la méthode correcte pour mettre à jour l'élément en fonction du type de contrôle.

Zone de saisie

L'exemple montre l'utilisation du modèle V dans les éléments de saisie et de zone de texte pour obtenir la bidirectionnalité Liaison de données :

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue双向数据绑定实例详解</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>input 元素：</p>
 <input v-model="message" placeholder="编辑我……">
 <p>消息是: {{ message }}</p>
 <p>textarea 元素：</p>
 <p style="white-space: pre">{{ message2 }}</p>
 <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 message: 'Runoob',
 message2: '菜鸟教程\r\nhttp://www.runoob.com'
 }
})
</script>
</body>
</html>

L'effet est tel qu'illustré :

Checkbox

Si la case à cocher est unique, c'est une valeur logique. Si elle est multiple, elle est liée au même tableau :

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>单个复选框：</p>
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
 <p>多个复选框：</p>
 <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
 <label for="runoob">Runoob</label>
 <input type="checkbox" id="google" value="Google" v-model="checkedNames">
 <label for="google">Google</label>
 <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
 <label for="taobao">taobao</label>
 <br>
 <span>选择的值为: {{ checkedNames }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 checked : false,
 checkedNames: []
 }
})
</script>
</body>
</html>
L'effet est le suivant :

Bouton radio

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <input type="radio" id="runoob" value="Runoob" v-model="picked">
 <label for="runoob">Runoob</label>
 <br>
 <input type="radio" id="google" value="Google" v-model="picked">
 <label for="google">Google</label>
 <br>
 <span>选中值为: {{ picked }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 picked : 'Runoob'
 }
})
</script>
</body>
</html>
L'effet est le suivant :

Liste déroulante

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <select v-model="selected" name="fruit">
 <option value="">选择一个网站</option>
 <option value="www.runoob.com">Runoob</option>
 <option value="www.google.com">Google</option>
 </select>
 <p id="output">
 选择的网站是: {{selected}}
 </p>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 selected: '' 
 }
})
</script>
</body>
</html>
L'effet est le suivant :

Modificateur

.lazy

Par défaut, v-model synchronise la valeur et les données de la zone de saisie dans l'événement d'entrée, mais vous pouvez ajouter un modificateur lazy, passant ainsi à Synchronize dans l'événement de changement : 

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number

Si vous souhaitez convertir automatiquement la valeur d'entrée de l'utilisateur en Type de nombre (si le résultat de la conversion de la valeur d'origine est NaN, la valeur d'origine sera renvoyée), vous pouvez ajouter un numéro modificateur au v-model pour gérer les valeurs d'entrée : 

<input v-model.number="age" type="number">
C'est souvent utile , car la valeur saisie en HTML sera toujours renvoyée sous forme de chaîne lorsque type="number" .

.trim

Si vous souhaitez filtrer automatiquement les espaces de début et de fin saisis par l'utilisateur, vous pouvez ajouter le modificateur de trim au v-model pour filtrer l'entrée : 

<input v-model.trim="msg">
Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Utiliser Koa2 pour implémenter le téléchargement et le téléchargement de fichiers

Convertir la chaîne HTML en balises HTML et utiliser

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!

php html 字符串 字符串类型 number 事件 input
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisez JS pour recevoir les paramètres de collection ListArticle suivant：Utilisez JS pour recevoir les paramètres de collection List

Articles Liés

Voir plus