<div id="app">
  <alert v-for="statu in status" :status=statu>
    <div>
      <h2>{{ statu }}</h2>
      <p>欢迎您来到w3cplus.com！</p>
    </div>
  </alert>
 </div>

 <template id="alert">
  <div class="alert" :class="[alertStatus]" v-show="isShow">
    <button class="close" @click="close">&times;</button>
    <slot>This is alert box!</slot>
  </div>
 </template>

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto:700');

body {
  background-color: #777;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  color: #fff;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  margin: 1rem;
}
#app {
  padding: 16px;
  max-width: 50vw;
  min-width: 50vw;
}
.alert {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
}
.alert.info {
  background-color: rgba(3, 169, 244, 0.54);
  border-color: #0277BD;
}
.alert.success {
  background-color: rgba(76, 175, 80, 0.54);
  border-color: #2E7D32;
}
.alert.danger {
  background-color: rgba(244, 67, 54, 0.54);
  border-color: #C62828;
}
.alert.warning {
  background-color: rgba(255, 235, 59, 0.54);
  border-color: #F9A825;
}

.alert > .close {
  -webkit-appearance: none;
  position: absolute;
  top: calc(50% - .5rem);
  right: 1rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.4;
}
.alert > .close:hover, 
.alert > .close:focus {
  text-shadow: none;
  opacity: 0.87;
}
h2 {
  margin: 0 0 1rem;
}

Vue.component('alert', {
  template: '#alert',
  props: ['status'],
  data () {
    return {
      isShow: true
    }
  },
  computed: {
    alertStatus: function () {
      console.log(this.status)
      return this.status
    }
  },
  methods: {
    close: function () {
      this.isShow = !this.isShow
    }
  }
})

let app = new Vue({
  el: '#app',
  data () {
    return {
      status: ['info', 'success', 'danger', 'warning']
    }
  }
})