Vue définit des étiquettes pour le texte

Vue.js est un framework JavaScript léger adapté à la création d'applications Web réactives. Dans Vue, nous pouvons utiliser des directives pour utiliser des étiquettes afin de définir des étiquettes de texte.

Les directives sont des attributs utilisés pour personnaliser les balises HTML dans Vue. Elles peuvent être utilisées pour diverses opérations telles que la liaison d'événements, le rendu conditionnel, les opérations de style et le rendu en boucle. Il existe de nombreuses instructions intégrées à Vue, telles que v-model, v-if, v-for, etc., et il prend également en charge les instructions personnalisées.

Dans Vue, nous utilisons la directive v-html pour restituer les données en contenu HTML. Dans l'exemple suivant, nous pouvons voir que l'instruction v-html restitue le contenu lié à la variable data dans une balise HTML :

<div v-html="data"></div>
<script>
  new Vue({
    el: '#app',
    data: {
      data: '<span>Vue 文字标签设置示例</span>'
    }
  })
</script>

Le résultat de sortie est :

Vue 文字标签设置示例

À ce stade, nous constatons que le texte est enveloppé dans une paire de balises span . Alors, que devons-nous faire si nous voulons définir d’autres balises pour ce texte ?

1. Méthode JavaScript native

Dans Vue, nous pouvons utiliser des méthodes JavaScript natives pour traiter les données afin de définir des étiquettes de texte. Par exemple, si nous voulons mettre en gras le texte dans le code ci-dessus, nous pouvons utiliser le code suivant :

<div v-html="formatData(data)"></div>
<script>
  new Vue({
    el: '#app',
    data: {
      data: '<span>Vue 文字标签设置示例</span>'
    },
    methods: {
      formatData: function (data) {
        return '<b>' + data + '</b>'
      }
    }
  })
</script>

Dans cet exemple, nous définissons une méthode Vue nommée formatData, dans laquelle les données sont en gras. et enfin transmettez les résultats renvoyés à l'instruction v-html pour le rendu. À ce stade, le résultat de sortie est :

Exemple de configuration d'étiquette de texte Vue

Nous pouvons voir que le texte a été mis en gras.

2. Approche hybride Vue

En plus d'utiliser JavaScript pour traiter les données, Vue propose également une approche hybride. Ceci est accompli à l'aide d'emplacements et de composants.

Nous pouvons utiliser un composant avec slot pour héberger le texte que nous souhaitons définir, puis utiliser JavaScript dans le composant pour faire fonctionner l'étiquette de texte. Voici un exemple d'utilisation d'emplacements et de composants pour mettre du texte en gras :

<!-- BoldText.vue 组件 -->
<template>
  <div>
    <b><slot></slot></b>
  </div>
</template>

<!-- 在使用 BoldText.vue 组件时传入需要加粗的文字 -->
<bold-text>Vue 文字标签设置示例</bold-text>

Dans cet exemple, nous avons créé un composant nommé BoldText, dans lequel les emplacements sont utilisés pour transporter le texte transmis, et le texte est mis en gras. Traitement approximatif. Lors de son utilisation, il suffit de transmettre le texte qui doit être en gras dans la balise du composant.

En utilisant la méthode ci-dessus, nous pouvons très bien résoudre le problème de la configuration des étiquettes de texte. Si vous rencontrez des problèmes de définition d'étiquette de texte lors de l'utilisation de Vue, vous pouvez essayer les deux méthodes ci-dessus pour les résoudre.

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!