Vue中自定义私有指令

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义私有指令</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <p v-fontweight="100"  v-fontsize="'100px'">这是一个很粗的</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        filters: {

        },
        //定义私有指令
        directives: {
            'fontweight': {  // 使用关键字作为私有指令名称容易出错
                bind: function (el, binding) {
                    console.log(binding);
                    el.style.fontWeight = binding.value;
                }
            },
            // 自定义指令函数简写 (当只是操作 bind 和 updated 函数的时候可以这么写)
            'fontsize': function (el, binding) {
                //等同于  在 bing 和 updated 函数中都写了如下的代码
                el.style.fontSize = parseInt(binding.value) + 'px';
            }
        }
    });
</script>
</html>
发布了62 篇原创文章 · 获赞 0 · 访问量 1247

猜你喜欢

转载自blog.csdn.net/weixin_45616246/article/details/105396754
今日推荐