<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
            background: #ececec;
<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.
    <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>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>


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

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