JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/0.11.0-rc2/dist/vue.js"></script>
<ul>
    <li v-repeat="items" v-component="text"></li>
</ul>

JavaScript

var Text = {
    template: '<span v-html="prepared"></span>',
    data: function () {
        return {
            value: 0
        }
    },
    computed: {
        prepared: function () {
            if (this.value > 0) {
                return this.value + '%';
            } else {
                return '-';
            }
        }
    }
};

new Vue({
    el: 'html',
    data: {
        items: [{value: 1}, {value: 2}, {value: 0}]
    },
    components: {
        'text': Text
    }
})