Maison > Article > interface Web > Comment implémenter la liaison et l'épissage des données d'attribut de balise vue
Cette fois, je vais vous montrer comment implémenter l'attribut vue tag liaison de données et l'épissage, et précautions pour implémenter la liaison et l'épissage des données d'attribut vue tag Quoi le sont-ils ? Voici des cas réels.
Après avoir numérisé les documents sur le site officiel de Vue, j'ai commencé à écrire le projet de site Web. Il n'y avait pas de design, j'ai donc trouvé un site Web de logiciel gagnant h5 sur Baidu et je l'ai copié. à ce sujet. Ensuite, changez le contenu.
Commencez d'abord à afficher une liste
Une fois l'instance de vue prête, ajoutez les données par défaut à l'objet et la liste est chargée avec succès. Consultez le code source pour voir si c'est ce que vous aviez en tête. Actuellement, nous affichons uniquement le tableau par défaut initialisé. Les opérations et les sauts dans la liste n'ont pas encore été ajoutés. Essayez d'ajouter le champ id et le numéro au tableau initialisé
et actualisez-le. une arnaque de Chrome Le cache est particulièrement grave et je dois vider le cache ou forcer le rafraîchissement. Vue a fait une erreur dans la console, disant que le {{id}} Erreur de grammaire . J'ai vérifié le document et il n'y avait pas d'exemple similaire. J'ai commencé à essayer de réécrire en me basant sur ma propre expérience. Après un moment, j'ai trouvé que ce n'était pas idéal. Il semble que le document n'ait pas été lu assez attentivement, il est nécessaire de le pilonner de manière ciblée. J'ai vu que la classe et le style de la balise étaient liés, et j'ai vu qu'il y avait une syntaxe d'objet et une syntaxe de tableau. Sans plus tarder, j'ai d'abord écrit la méthode d'écriture d'objet dans la balise a, rafraîchie pour voir l'effet, et j'ai trouvé que. le href de la balise a était comme détail/[
objet objet], j'ai ri.
<tr v-for="item in Strategys" class="ng-scope"> <td> <a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a> </td>Code de bloc de données
var vm = new Vue({ el: '#section-strategies', data: { parentMessage: 'Parent', StrategyCnt:0, Strategys: [{id:1,name:'文章1'},{id:2,name:'文章2'}] } })L'étape suivante consiste à utiliser Ajax pour demander les données du serveur. Il est impossible de toujours utiliser l'initialisation et les données par défaut
.
Croyez-le ou non 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 :Comment modifier create-react-app pour prendre en charge plusieurs pages
sans utiliser select Comment implémentez la fonction de liste déroulante dans vue
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!