<div id="app">
    <div class="banner" v-if="showBanner">
        <a class="remove" v-on:click="dismissBanner">&times;</a>
        <h4>Special Offer! 25% off.</h4>
    </div>
</div>
body {
  background: #f0f0f0;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  padding: 20px;
}

/* banner */

.banner{
  background: #fff;
  padding: 40px;
  border-radius: 2px;
}

.remove {
  background: #999;
  padding: 5px 10px;
  margin: 0 10px 0 0;
  border-radius: 2px;
  cursor: pointer;
}

.remove:hover {
  background: #888;
}

h4 {
  margin: 0;
  display: inline-block;
}

/* list */
let vm = new Vue({
    data: {
        showBanner: !localStorage.getItem("hideBanner")
    },
    methods: {
        dismissBanner: function(){
            this.showBanner = false;
            localStorage.setItem("hideBanner", true);
        },
    },
    el: "#app"
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js