Maison > Article > interface Web > Comment utiliser les contrôles de formulaire Vue.js
Comment utiliser les contrôles de formulaire Vue.js
- php中世界最好的语言original
- 2018-05-03 09:39:391215parcourir
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>
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>
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>
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>
Modificateur
.lazyPar 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" >.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">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
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">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!