Vue

by jeongukjae

HTML

<div id="app">
  <h1>
    Content (raw message)
  </h1>
  <p>
    {{ message }}
  </p>
  <h1>
    Content (replaced)
  </h1>
  <p v-html='joined' />
  <h1>
    Content (using v-for)
  </h1>
  <p>
    <template v-for="(c, index) in content">
      {{ c }} <br :key='index'>
    </template>
  </p>
</div>

CSS

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

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

h1 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

p {
  margin-bottom: 20px;
}

Vue

new Vue({
  el: "#app",
  data: {
  	message: 'Hello, Everyone.\nMy name is Bob.'
  },
  computed: {
		content: function () {
    	return this.message.split('\n')
    },
    joined: function () {
    	return this.content.join('<br>')
    }
  }
})