vue-其他自定义指令.html

最新推荐文章于 2024-07-30 10:56:44 发布

虾米大王

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量51

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/modern358/article/details/130135829

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="searchName" v-focus v-color="'red'" v-font-size="24">
    </div>

    <script src="../js/vue.js"></script>

    <script>

        const vm = new Vue({
            el:'#app',
            data:{
                searchName:'春风',
            },
            directives :{
                color:{
                    bind(el,binding){
                        el.style.color = binding.value;
                    }
                },
                'font-size': function (el,binding) {
                    el.style.fontSize = binding.value + 'px';
                }
            }
        })

        Vue.directive('focus',{
            bind:function (el) {

            },
            inserted:function (el) {
                el.focus()
            },
            updated:function (el) {

            }
        })

    </script>
</body>
</html>