vue自定义指令-基础配置

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .card{
            width:200px;
            background: #ececec;
            margin:10px;
            padding:10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-pin="card1.pinned" class="card">
        <button @click="card1.pinned = !card1.pinned">钉住/取消</button>
        After three years of construction, the world's largest cruise ship just set sail from Barcelona, Spain, on its inaugural voyage to destinations around the Mediterranean.    </div>

    <div v-pin="card2.pinned" class="card">
        <a href="#" @click="card2.pinned = !card2.pinned">Pin it!</a>But the ship's record-breaking size isn't its only claim to fame.
    </div>
    <p>The Symphony of the Seas is home to the tallest waterslide at sea, the ocean's fastest Internet and more works of art than the Louvre has paintings.</p>
    <p>"The most surprising and memorable thing for me was that first sight of the ship -- seeing how big and immense it is," Balwin Yeung, Royal Caribbean's director of sales and marketing in Hong Kong, tells CNN Travel.</p>
    <p>"You can actually see it the moment you almost step out of the airport in Barcelona, since the port is just 10 to 15 minutes away. It makes a huge first impression."</p>
    <p>As the world's largest cruiseliner by volume, Symphony of the Seas stretches 1,188 feet long and is filled with 22 restaurants, 24 pools and 2,759 cabins.</p>
    <p>At capacity, the ship can host about 6,680 guests -- plus 2,200-some crew members for a total of nearly 9,000 people.</p>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.directive('pin', function(el, binding){
    var pinned = binding.value;
    if(pinned){
        el.style.position = 'fixed';
        el.style.left = '20px';
        el.style.top = '20px';
    }else{
        el.style.position = 'static';
    }
})

new Vue({
    el: '#app',
    data: {
        card1: {
            pinned: false
        },
        card2: {
            pinned: false
        }
    }
})

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页