JSFiddle - React, Tailwind, and code Playground

by timhuang

HTML

<div id="root">
  {{ kittifyName }}
  <input v-model="newCat" @keyup.enter="addCat">
  <button @click="addCat">
    + Add
  </button>
  <ul>
    <li v-for="cat in cats">{{ cat.name | capitalize | kittify}}</li>
  </ul>
  <cat-list :cats="cats"></cat-list>
</div>

CSS

.red {
  border: 2px solid red;
}

.green {
  border: 2px solid breen;
}

JavaScript

Vue.component('cat-list', {
	props: ['cats'],
	template:`
  	<ul>
    	<li v-for="cat in cats">{{ cat.name }}</li>
    </ul>
    `

});


app = new Vue({
	el: '#root',
  component: [
  	'cat-list'
  ],
  data: {
  	cats: [
    	{name: '中文'},
      {name: '小花'},
      {name: '小圓'}
    ],
    newCat: ''
  },
  methods: {
  	addCat: function(){
    	this.cats.push({name: this.newCat});
      this.newCat = '';
    }
  },
  filters: {
  	capitalize: function(v){
    	return v.toUpperCase();
    },
    kittify: function(v){
    	return v + ' y';
    }
  },
  computed: {
    kittifyName: function(v){
    	if(this.newCat.length > 2){
      	return this.newCat + ' x';
      }
    }  	
  }
});