Benutzerdefinierte Direktive von Vue.js

Dieses Mal bringe ich Ihnen die benutzerdefinierte Direktive von Vue.js. Was sind die Vorsichtsmaßnahmen für die Verwendung der benutzerdefinierten Direktive von Vue.js? Hier ist ein praktischer Fall.

Nehmen Sie benutzerdefinierte V-CSS-Anweisungen als Beispiel:

Lokale Anweisungen

<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>

Globale Anweisungen
Globale Anweisungen in der Datei main.js anpassen

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
  }
})

Benutzerdefinierte Anweisungen verwenden

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie zu anderen chinesischen PHP-Websites Verwandte Artikel!

Empfohlene Lektüre:

Berechnete Eigenschaften und Datenüberwachung von Vue.js

Vue.js-Ereignisbindung - Integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung

Vue.js-Listenrendering V-for-Array-Objekt-Unterkomponente

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Direktive von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!