JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.js"></script>
<ul>
    <li v-repeat="test">
        <span>{{name}}</span>
        <!-- only show this line if manager -->
        <span v-if="type | !isEmp">{{type}}</span>
        <!-- only show this line if employee -->
        <span v-if="type | isEmp" style="color:red;">{{type}}</span>
    </li>
</ul>

JavaScript

var data = [{
    name: 'Test1',
    type: 'manager'
}, {
    name: 'Test2',
    type: 'employee'
}, {
    name: 'Test3',
    type: 'manager'
}, {
    name: 'Test4',
    type: 'manager'
}, {
    name: 'Test5',
    type: 'manager'
}, {
    name: 'Test6',
    type: 'manager'
}, {
    name: 'Test7',
    type: 'manager'
}];
var vue = new Vue({
    el: 'ul',
    data: {
        title: 'test',
        test: data
    },
    filters: {
        isEmp:function(_val) {
            return _val==='employee'?true:false;
        }
    }
});