Vue

by khamer

HTML

<div id="app">
  <thing v-for="s in stuff" :s="s" v-slot="foo">
  <h1>hello</h1>
    {{ foo }}
  </thing>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
	components: {
  	thing: {
    	props: ['s'],
    	render: function(createElement) {
      	if (this.s.url) {
        	return createElement(
          	'a', {href: this.s.url},
            this.$slots.default
          );
        } else {
        	return createElement(
          	'span',
            this.$slots.default
          );
        }
      }
    }
  },
  el: "#app",
  data: {
    stuff: [
    	{url: "foo", title: "Hello"},
      {title: "There"}
    ]
  },
})