自定义指令

54 阅读1分钟
<template>

    <p v-color="'purple'" v-bgc="c2">李易峰</p>

  //v-model 双向数据绑定 当页面值改变时 改变c2 改变试图
    <input type="color" v-model="c2">    
</template>

<script>
    export default {
        directives: {  // 定义  自定义指令
        color(el, binding) {  // el 绑定指令的元素  binding 指令对应的值
            console.log(el, binding.value);
            el.style.color = binding.value;
        },
        bgc(el, binding) {
            el.style.background = binding.value;
        },
    },
    }
</script>