Explication détaillée des exemples de liaison de données bidirectionnelle Vue-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-06-13 09:25:58

original

2077 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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" >

Copier après la connexion

.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">

Copier après la connexion

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">

Copier après la connexion

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!