Vue.js カスタム ディレクティブ ディレクティブ

今回はVue.jsのカスタムディレクティブについてご紹介します。Vue.jsのカスタムディレクティブを使用する際の注意点について、実際の事例を見てみましょう。

カスタム v-css 命令を例に挙げます:

ローカル命令

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

グローバル命令
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
  }
})

カスタム命令を使用する

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

この記事を読んだことがあるはずですケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js の計算プロパティとデータ監視

Vue.js イベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディング

Vue.js リスト レンダリング v-配列オブジェクトのサブコンポーネント用

以上がVue.js カスタム ディレクティブ ディレクティブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。