JSFiddle - React, Tailwind, and code Playground

by reeco

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.js"></script>
<body>
    <div class="container">
        <div class="col-xs-8 col-sm-8 col-md-4 col-lg-8">
            <h1>Vue demo</h1>
            <div id="app">
                <table class="table table-hover" v-cloak>
                    <thead>
                        <tr>
                            <th class="text-right" @click="sortBy('id')">序号</th>
                            <th class="text-right" @click="sortBy('name')">书名</th>
                            <th class="text-right" @click="sortBy('author')">作者</th>
                            <th class="text-right" @click="sortBy('price')">价格</th>
                            <th class="text-right">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="book in books | orderBy sortparam">
                            <td class="text-right">{{book.id}}</td>
                            <td class="text-right">{{book.name}}</td>
                            <td class="text-right">{{book.author}}</td>
                            <td class="text-right">{{book.price}}</td>
                            <template v-if="book.id%2==0">
                                <td class="text-right">
                                    <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
                                </td>
                            </template>
                            <template v-else>
                                <td class="text-right">
                                    <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
                                </td>
                            </template>
                        </tr>
                        <tr>
                            <td...

CSS

[v-cloak]:{
		display: none;
	}

JavaScript

new Vue({
    el: '#app',
    ready: function() {
        this.$http.get('https://api.myjson.com/bins/r8mm', function(data) {
            this.$set('books', data);
        }).error(function(data, status, request) {
            console.log('fail' + status + "," + request);
        })
    },
    data: {
        sortparam: '',
        book: {
            id: 0,
            author: '',
            name: '',
            price: ''
        },
        books: ''
    },
    computed: {
        sum: function() {
            var result = 0;
            for (var i = 0; i < this.books.length; i++) {
                result = Number(this.books[i].price) + result;
            };
            return result;
        }
    },

    methods: {
        addBook: function() {
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            this.book = '';
        },
        delBook: function(book) {
            this.books.$remove(book);
        },
        sortBy: function(sortparam) {

            this.sortparam = sortparam;
        }
    }
});