Comment utiliser les contrôles de formulaire Vue.js-js tutoriel-php.cn

Comment utiliser les contrôles de formulaire Vue.js

php中世界最好的语言

Libérer： 2018-05-03 09:39:39

original

1338 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser le contrôle de formulaire Vue.js. Quelles sont les précautions lors de l'utilisation du contrôle de formulaire Vue.js. 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 un élément de contrôle de 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: 'php中文网',
 message2: 'www.php.cn'
 }
})
</script>
</body>
</html>

Copier après la connexion

case à cocher

Si la case à cocher est une seule 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 测试实例</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

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">PHP</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 : 'PHP'
 }
})
</script>
</body>
</html>

Copier après la connexion

Liste déroulante

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">
 <select v-model="selected" name="fruit">
 <option value="">选择一个网站</option>
 <option value="www.PHP.cn">php</option>
 </select>
 <p id="output">
 选择的网站是: {{selected}}
 </p>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 selected: '' 
 }
})
</script>
</body>
</html>

Copier après la connexion

Modificateur

.lazy

Par défaut, v -model synchronise la valeur et les données de la zone de saisie dans l'événement input, mais vous pouvez ajouter un modificateur paresseux pour passer à la synchronisation dans l'événement change :

<!-- 在 "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 Nombre (si le résultat de la conversion de la valeur d'origine est NaN, la valeur d'origine est renvoyée), vous pouvez ajouter un nombre modificateur au v-model pour traiter la valeur d'entrée :

<input v-model.number="age" type="number">

Copier après la connexion

Ceci est souvent utile car la valeur saisie en HTML sera toujours renvoyée sous forme de chaîne lorsque type="number" est utilisé.

.trim

Si vous souhaitez

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

<input v-model.trim="msg">

Copier après la connexion

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Quelles fonctions sont implémentées par new() dans JS

Quels sont les points de confusion lors de l'utilisation JS

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!