051——VUE中自定义指令:directive

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自定义指令:directive</title>
    <script src="vue.js"></script>
</head>
<body>
<!--
    directive:
        bind  inserted:插入的  update
-->
<div id="demo">
    <h3 v-star="color">标题部分</h3>
    <input type="text" v-model="color" v-focus>
    <h1 v-hide="true">{{title}}</h1>
</div>
<script>
    new Vue({
        el: "#demo",
        data: {
            title: "百度一下就知道",
            color: "red"
        },
        directives: {
            star(el, bind) {
                var color = bind.value ? bind.value : 'red';
                el.style.cssText = "color:" + color;
            },
            focus: {
                inserted(el, bind) {
                    el.focus();
                }
            },
            hide(el,bind){
                if(bind.value){
                    el.style.cssText="display:none";
                }
            }
        }
    });
</script>

</body>

</html>

  

posted @ 2018-01-12 15:50  生如逆旅,一苇以航  阅读(170)  评论(0编辑  收藏  举报