美文网首页
directive 自定义指令

directive 自定义指令

作者: 0说 | 来源:发表于2018-11-08 22:35 被阅读0次

全局自定义指令

<body>
    <div id="app">
        <h2 v-if='isLogin'>1</h2>
        <h2 v-else='isLogin'>2</h2>
        <input v-model='inp' type="text" name="" id="">
        <div>{{inp | fn()}}</div>
        <!-- v-dream是下面自定义的指令  red 是data里数据-->
        <div v-dream='red'>6666</div>

    </div>
    <script>
        //              指令名   el:dom元素, bind指令的信息 包括值等等
        Vue.directive('dream', (el, bind) => {
            console.log(el)
            el.style.color = bind.value
            console.log(bind)
        })
        new Vue({
            el: '#app',
            data: {
                isLogin: true,
                inp: '',
                red: 'red'
            },
          // 过滤器
            filters: {
                fn(val){
                    let reg = /\D/
                    if(!reg.test(val)){
                        return val
                    }
                }
            }
        })
    </script>
</body>

相关文章

网友评论

      本文标题:directive 自定义指令

      本文链接:https://www.haomeiwen.com/subject/okbgxqtx.html