JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id='app'>
  <p v-once>count once: <b>{{ count }}</b></p>
  <p :style='{color: myColor}'>count is: <b>{{ count }}</b></p>
  <div>
    <p v-if='count'>Count is true</p>
    <p v-else>Count isn't true</p>
    <p v-html='rawHtml'></p>
  </div>
  <br />
  <form @submit.prevent="onSubmit"></form>
  <input v-model='myColor' v-on:change='alertMe("color changed")'/>
  <button @click='increase'>Increase count</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    count: 0,
    myColor: 'red',
    rawHtml: '<span style="color: green">Raw html</span>'
  },
  methods: {
    increase: function() {
      this.count++;
    },
    alertMe: function (text) {
      alert(text);
    },
    onSubmit: function() {
      return true;
    }
  }
});