JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/0.11.8/dist/vue.js"></script>
<app-foo></app-foo>

<app-foo footext="test text"></app-foo>

<app-foo v-attr="footext: 'another test'"></app-foo>

<app-foo v-attr="footext: foo ? 'you clicked me' : 'click me'" v-on="click: toggle"></app-foo>

<div v-attr="class: foo ? 'red' : 'blue'">{{foo}}</div>

<app-foo v-with="footext: foo ? 'you clicked me' : 'click me'" v-on="click: toggle"></app-foo>

CSS

div.red {
    color: white;
    background: red;
}

div.blue {
    color: white;
    background: blue;
}

JavaScript

var component = {
    template: '<p>{{footext}}</p>',
    paramAttributes: ['footext'],
    compiled: function() {
        console.log(this.footext);
    }
}

new Vue({
    el: 'body',
    data: {
        foo: false
    },
    components: {
        'app-foo': component
    },
    methods: {
        toggle: function() {
            this.foo = !this.foo;
        }
    }
})