<!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>
<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>
4184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
