8.vue.js实例：Vue.js 表格

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/special.css" rel="stylesheet" />
    <!--<script src="js/vue.min.js"></script>-->
    <script src="js/Vue-1.0.11.js"></script>
</head>
<body>
    <form>
        <div class="pc-content">
            <h3>Vue.js 表格</h3>
            <div class="line-txt">


            </div>
            <div id="add-book">
                <table class="grid" id="app">
                    <thead>
                        <tr>
                            <th @click ="sortBy('id')">编号</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>单价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="book in books | orderBy sortparam" v-cloak="display none ">
                            <td>{{book.id}}</td>
                            <td>{{book.name}}</td>
                            <td>{{book.author}}</td>
                            <td>{{book.price}}</td>
                        </tr>
                    </tbody>
                </table>


                <legend>添加书籍</legend>
                <div class="line-txt">
                    <label for="">书名</label> <input type="text" class="input-text" v-model="book.name">
                </div>
                <div class="line-txt">
                    <label for="">作者</label> <input type="text" class="input-text" v-model="book.author">
                </div>
                <div class="line-txt">
                    <label for="">价格</label> <input type="text" class="input-text" v-model="book.price">
                </div>
                <input type="button" class="btn-blue-dp" @cilck="addBook()" value="添 加" />


            </div>


        </div>
    </form>
    <script type="text/javascript">
        var loadBook= new Vue({
            el: '#app',
            data: {
                sortparam: '',
                book:
                    { id: 0, author: '', name: '', price: '' },
                books: [
                    { id: 1, author: '曹雪芹', name: '红楼梦', price: 32.0 },
                    { id: 2, author: '施耐庵', name: '水浒传', price: 30.0 },
                    { id: '3', author: '罗贯中', name: '三国演义', price: 24.0 },
                    { id: 4, author: '吴承恩', name: '西游记', price: 20.0 }]
            },
            methods: {
                addBook: function () {
                    //计算书的id                    
                    this.book.id = this.books.length + 1;
                    this.books.push(this.book);
                    console.log(book);
                    //将input中的数据重置
                    //this.book = '';
                },
                sortBy: function (sortparam) {
                    this.sortparam = sortparam;
                }
            }
        });
        
    </script>


</body>
</html>