首页 > 代码库 > vue.js实现简单增删效果

vue.js实现简单增删效果

2024-08-29 02:51:27   222人阅读

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
 7     <script src="dist/vue.min.js"></script>
 8     <style type="text/css">
 9         [v-cloak] {
10           display: none;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="col-md-6 col-md-offset-3">
17             <h1>Vue demo</h1>
18             
19             <div id="app">
20             <table class="table table-hover ">
21               <caption></caption>
22               <thead>
23                 <tr>
24                   <th>序号</th>
25                   <th>书名</th>
26                   <th>作者</th>
27                   <th>价格</th>
28                   <th>操作</th>
29                 </tr>
30               </thead>
31                 <tbody>
32                     <tr v-cloak v-for="book in books"> 
33                         <td>{{book.id}}</td>
34                         <td>{{book.name}}</td>
35                         <td>{{book.author}}</td>
36                         <td>{{book.price}}</td>
37                         <template v-if="book.id%2==0">
38                              <td class="text-left">
39                                      <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
40                               </td>
41                         </template>
42                         <template v-else>
43                                 <td class="text-left">
44                                     <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
45                                 </td>
46                         </template>
47                     </tr>
48                   </tbody>
49 
50             </table>
51             
52                 <div id="add-book">
53 
54                   <legend>添加书籍</legend>
55 
56                 <div class="form-group">
57                       <label for="">书名</label>
58                          <input type="text" class="form-control" v-model="book.name">
59                 </div>
60 
61                 <div class="form-group">
62                        <label for="">作者</label>
63                        <input type="text" class="form-control" v-model="book.author">
64                 </div>
65 
66                 <div class="form-group">
67                     <label for="">价格</label>
68                     <input type="text" class="form-control" v-model="book.price">
69                 </div>
70 
71                 <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
72                 </div>
73 
74             </div>
75 
76         </div>
77     </div>
78     <script type="text/javascript" src="1.js"></script>
79 </body>
80 </html>

 

 js

new Vue({
    el: ‘#app‘,
    methods: {
        addBook: function() {
            //计算书的id
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            //将input中的数据重置
            this.book = {};
        },
        delBook: function(book) {
            var blength = this.books.length;
            this.books.splice(book.id-1, 1);
            for( var i = 0; i < blength ; i++) {
                if(book.id < this.books[i].id) {    
                    this.books[i].id -= 1;
                }
            }  

        }
    },
    data: {
        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
        }]
    }
 });

 

vue.js实现简单增删效果


联系
我们