以下のコードのどれが修飾詞かというと...
ディレクティブの隣のsolidの隣のround
です!!!!
:がついてるsolidは引数です。
App.vue
<template>
<!-- :の後に入るのは引数 -->
<!-- 引数の後に.(ドット)つけるのが修飾詞-->
<p v-border:solid.round="{width:'5px',color:'red'}">Home</p>
</template>
jsの方では
- 修飾詞がついてる時とついてない時があるので、if文で分ける
- roundが、修飾詞として選択されているか見極めたい
- もし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)";
}
});