Vue.js 사용자 정의 지시어 지시어

이번에는 Vue.js의 Custom 지시어를 가져왔습니다. Vue.js의 Custom 지시어 사용 시 주의사항은 무엇인가요?

사용자 정의 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue.js의 계산된 속성 및 데이터 모니터링

Vue.js 이벤트 바인딩 - 내장 이벤트 바인딩, 사용자 정의 이벤트 바인딩

Vue.js 목록 렌더링 v- 배열 객체 하위 구성요소

위 내용은 Vue.js 사용자 정의 지시어 지시어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!