Vue中全局指令传递参数

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令传递参数</title>
    <script src="../../vue/vue.js"></script>

</head>
<body>
<div id="app">

    <!--注意: 传递的参数是字符串的时候要用 '' 包起来,否则会当做Vue实例中的变量处理-->
    <input v-color="'blue'" placeholder="这是个有颜色的输入框">
</div>
</body>
<script>

    Vue.directive('color', {
        bind: function (el, binding) {
            // 一般和样式有关的都写在 bind 函数中
            // el.style.color = 'red';
            el.style.color = binding.value;
            /**
             * binding:
             *  - name: "color"         指令名称(不包含前缀)
             *  - rawName: "v-color"    指令名称(包含前缀)
             *  - value: "blue"         传递的参数
             *  - expression: "'blue'"  传递的参数字符串
             */
            console.log(binding);
        },
        inserted: function(el) {
            // 一般行为有关的指令都写在 inserted 函数中
            el.focus(); // 加载页面获取焦点
        }
    });
    var vm = new Vue({
        el: '#app'
    });
</script>
</html>

键盘的打工仔

发布了62 篇原创文章 · 获赞 0 · 访问量 1247

私信关注

Vue中全局指令传递参数

请陛下批阅

猜你喜欢