Directive de directive personnalisée Vue.js

Cette fois, je vous apporte la directive personnalisée de Vue.js. Quelles sont les précautions à prendre pour utiliser la directive personnalisée de Vue.js ? Voici un cas pratique, jetons un coup d'œil.

Prenons comme exemple les directives v-css personnalisées :

Directives locales

<script>
  export default {    //自定义v-css指令
    directives: {      css: {
        inserted (el, bind) {          let styleObj = bind.value          let arr = []          for (let key in styleObj) {
            arr.push(key + &#39;:&#39; + styleObj[key])
          }
          arr = arr.join(&#39;;&#39;)
          el.style.cssText = arr
        }
      }
    }</script>

Directives globales
Personnalisez les directives globales dans le fichier main.js

Vue.directive('css', {
  inserted (el, binding) {    let styleObj = binding.value    let arr = []    for (let key in styleObj) {
      arr.push(key + ':' + styleObj[key])
    }
    arr = arr.join(';')
    el.style.cssText = arr
  }
})

Utilisez les instructions personnalisées

<p v-css="{color: &#39;orange&#39;, &#39;font-size&#39;: &#39;24px&#39;}">我是p标签</p>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres sites Web chinois php Articles connexes !

Lecture recommandée :

Propriétés calculées et surveillance des données de Vue.js

Événements Vue.js - liaison d'événement intégrée, liaison d'événement personnalisée

Rendu de liste Vue.js v-pour le sous-composant d'objet de tableau

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!