JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">

 Edit: <input type="text" v-model="rawContent">

  <div>
    v-text:
    <div class="text" v-text="rawContent"></div>
  </div>

  <div>
    v-html:
    <div class="html" v-html="rawContent"></div>
  </div>
    
  <div>
    v-text with "v-once":
    <div class="html" v-text="rawContent" v-once></div>
  </div>
  
</div>

CSS

body {
  padding: 1rem;
}

#app > div {
  margin: 1rem 0;
}

input {
  width: 300px;
  padding: 3px;
}

.text, .html {
  border: 1px solid #aaa;
  padding: 10px 5px;
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
			rawContent: '<h1>HELLO Vue!</h1>'
    }
  }
}).mount('#app');