自定义指令-基础配置 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .card{
            width: 200px;
            background: #ccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-pin="card1.pinned" class="card">
        <button @click="card1.pinned = !card1.pinned">点我啊~</button>
        this is my first card!
        this is my first card!
        this is my first card!
        this is my first card!
        this is my first card!
    </div>
    <div v-pin="card2.pinned" class="card">
        <a @click="card2.pinned = !card2.pinned" href="#">please touch me</a>
        this is my second card!
        this is my second card!
        this is my second card!
        this is my second card!
        this is my second card!
    </div>
    <div>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
        this is my test code@!
        <br>
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Vue.directive("pin",function (el,binding) {
    var pinned = binding.value;
    if(pinned){
        el.style.position = "fixed",
            el.style.top = "20px",
            el.style.left = "20px"
    }else{
        el.style.position = "static"
    }
});


var app = new Vue({
    el:"#app",
    data:{
        card1:{
            pinned:false
        },
        card2:{
            pinned:false
        }
    }
});

 

posted @ 2018-01-30 19:23  前方、有光  阅读(160)  评论(0)  编辑  收藏  举报