JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document new with vue js</title>
</head>
<body>
    <div id="app" v-bind:class="{ colorred: isred}">
      {{ msg | commom | final}}
      
      <p v-on:click='eoqred' class='pointer'>click</p>
      
      <rodrigo-luan v-bind:titulo='build'></rodrigo-luan>
      <input type="text" v-model='build'>
    </div>
    
</body>
</html>

CSS

.colorred {
  color: red
}
.pointer {
  cursor: pointer;
}

JavaScript

Vue.component('rodrigo-luan', {
	props: ['titulo'],
  template: "<h2>{{ titulo }}</h2>"
})

var app = new Vue({
	el: '#app',
  data: {
  	msg: " i dont know what talk for u",
    isred: false,
    build: 'comeco'
  },
  methods: {
    eoqred: function () {
     this.isred = !this.isred
    }
  },
  filters: {
  	commom(text) {
    	return text + '.'
    },
    final(text) {
    	return text + ' overflow'
    },
  }
});