LoginSignup
0
0

More than 3 years have passed since last update.

Vue.jsのカスタムディレクティブの修飾詞について

Last updated at Posted at 2020-02-21

 以下のコードのどれが修飾詞かというと...

ディレクティブの隣のsolidの隣のroundです!!!!
:がついてるsolidは引数です。

App.vue
<template>
<!-- :の後に入るのは引数 -->
<!--  引数の後に.(ドット)つけるのが修飾詞-->
<p v-border:solid.round="{width:'5px',color:'red'}">Home</p>
</template>

jsの方では

  1. 修飾詞がついてる時とついてない時があるので、if文で分ける
  2. roundが、修飾詞として選択されているか見極めたい
  3. もしroundが選択されてた場合、trueそうでなければfaulse
main.js
//{}内に書いたものは、bindとupdatedに適用される
Vue.directive("border",function(el,binding){  
  //上の二つを一気に書くと、
  el.style.borderWidth = binding.value.width;  
  el.style.borderColor = binding.value.color; 
  //arg = argument = 引数
  el.style.borderStyle = binding.arg
  //修飾詞がついてる時とついてない時があるので、if文で分ける
  //roundが、修飾詞として選択されているか見極めたい
  //もしroundが選択されてた場合、trueそうでなければfaulse
  if(binding.modifires.round){
    el.style.borderRadius = "0.5rem";
    }
  if(binding.modifires.shadow){
    el.style.boxShadow = "0.2px 5px rgba(0,0,0,0.26)";
    }  
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0