Le contenu partagé avec vous dans cet article est un résumé des instructions couramment utilisées dans Vue. Le contenu est très détaillé. Examinons ensuite le contenu spécifique, dans l'espoir d'aider les amis dans le besoin.
1 Commandes communes
Commande v-if
Commande v-show
Commande v-else
Commande v-for
Commande v-bind
v-model
commande v-on
commande v-text
1.1 v-if est une instruction de rendu conditionnel, qui supprime et insère des éléments en fonction de l'expression vraie ou fausse. Sa syntaxe de base est la suivante :
v-if="expression"
expression est une expression qui renvoie une valeur booléenne. be a L'attribut bool peut également être une expression d'opération qui renvoie bool. Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>Le résultat affiché est le suivant,
Remarque : L'instruction v-if est basée sur la valeur de l'expression conditionnelle Effectuer l'insertion ou la suppression d'éléments .
1.2 directive v-for
v-for rend une liste basée sur un tableau Elle est similaire à la syntaxe de parcours de JavaScript :
v-for="item in items"
items est un tableau, item est l'élément du tableau actuellement parcouru.
Exemple de code :
name
age
{{item.name}}
{{item.age}}
1.3 La directive v-bind peut prendre un paramètre après son nom, séparé par deux points. Ce paramètre est généralement un attribut de l'élément HTML, pour. exemple : v-bind:class
v-bind:argument="expression"
1.4 v-model