Vue小案例（一）

案例需求：

创建一个品牌展示表格，表头有编号（id），品牌名称（name），创建时间（time）和操作，需要实现的功能是对数据的增删操作，和时间的格式化。

思路分析：
在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能，把案例分成以下几个部分来开发：

展示数据，需要使用v-for指令
删除数据，需要使用v-on绑定一个事件
添加数据，需要使用双向数据绑定
时间的格式化，需要使用过滤器

实现步骤：

1、开发静态模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      
      .right table tr {
        text-align: center;
      }
      
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" />
          <input type="text" placeholder="输入名称" /><br />
          <input type="button" value="添加数据" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr>
              <td>1</td>
              <td>宝马</td>
              <td>2017-12-27</td>
              <td>
                <a href="javascript:void(0)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

View Code

2、使用v-for指令展示数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      
      .right table tr {
        text-align: center;
      }
      
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" />
          <input type="text" placeholder="输入名称" /><br />
          <input type="button" value="添加数据" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in list">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td>
                <a href="javascript:void(0)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {"id":1,"name":"宝马","time":new Date()},
                    {"id":2,"name":"奔驰","time":new Date()}
                ]
            }
        })
    </script>
  </body>
</html>

View Code

3、删除数据，在methods中定义删除方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      
      .right table tr {
        text-align: center;
      }
      
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" />
          <input type="text" placeholder="输入名称" /><br />
          <input type="button" value="添加数据" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in list">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td>
                <a href="javascript:void(0)" @click="del(item.id)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          list: [{
              "id": 1,
              "name": "宝马",
              "time": new Date()
            },
            {
              "id": 2,
              "name": "奔驰",
              "time": new Date()
            }
          ]
        },
        methods: {
          del: function (id) {
            if (!confirm("是否删除数据？")) {
              return;
            }
            //调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
            var index = this.list.findIndex(function (item) {
              return item.id == id;
            });
            //调用list.splice(删除的索引，删除的元素个数)
            this.list.splice(index, 1);
          }
        }
      })
    </script>
  </body>
</html>

View Code

4、添加数据，使用双向数据绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      
      .right table tr {
        text-align: center;
      }
      
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" v-model="id" />
          <input type="text" placeholder="输入名称" v-model="name" /><br />
          <input type="button" value="添加数据" @click="add" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in list">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td>
                <a href="javascript:void(0)" @click="del(item.id)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          id: '',
          name: '',
          list: [{
              "id": 1,
              "name": "宝马",
              "time": new Date()
            },
            {
              "id": 2,
              "name": "奔驰",
              "time": new Date()
            }
          ]
        },
        methods: {
          del: function (id) {
            if (!confirm("是否删除数据？")) {
              return;
            }
            //调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
            var index = this.list.findIndex(function (item) {
              return item.id == id;
            });
            //调用list.splice(删除的索引，删除的元素个数)
            this.list.splice(index, 1);
          },
          add: function () {
            //包装成list要求的对象
            var tem = {
              id: this.id,
              name: this.name,
              time: new Date().toLocaleString()
            };
            //将tem追加到list数组中
            this.list.push(tem);
            //清空页面上的文本框中的数据
            this.id = "";
            this.name = "";
          }
        }
      })
    </script>
  </body>

View Code

5、格式化时间，使用过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      
      .right table tr {
        text-align: center;
      }
      
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" v-model="id" />
          <input type="text" placeholder="输入名称" v-model="name" /><br />
          <input type="button" value="添加数据" @click="add" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in list">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
              <td>
                <a href="javascript:void(0)" @click="del(item.id)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <script>
      //定义全局过滤器
      Vue.filter("datefmt", function (input, formatstring) {
        var result = "";
        var year = input.getFullYear();
        var month = input.getMonth() + 1;
        var day = input.getDate();
        var hour = input.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = input.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        if (formatstring == 'yyyy-mm-dd') {
          result = year + "-" + month + "-" + day;
        } else {
          result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
        }
        return result;
      })
      var vm = new Vue({
        el: '#app',
        data: {
          id: '',
          name: '',
          list: [{
              "id": 1,
              "name": "宝马",
              "time": new Date()
            },
            {
              "id": 2,
              "name": "奔驰",
              "time": new Date()
            }
          ]
        },
        methods: {
          del: function (id) {
            if (!confirm("是否删除数据？")) {
              return;
            }
            //调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
            var index = this.list.findIndex(function (item) {
              return item.id == id;
            });
            //调用list.splice(删除的索引，删除的元素个数)
            this.list.splice(index, 1);
          },
          add: function () {
            //包装成list要求的对象
            var tem = {
              id: this.id,
              name: this.name,
              time: new Date()
            };
            //将tem追加到list数组中
            this.list.push(tem);
            //清空页面上的文本框中的数据
            this.id = "";
            this.name = "";
          }
        }
      })
    </script>
  </body>
</html>

View Code

至此，一个关于Vue的小案例开发就成功开发了，是不是非常的简单？

6、增加搜索数据功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .box {
        width: 900px;
        height: auto;
        overflow: hidden;
        margin: 30px auto;
      }
      .left {
        height: 150px;
        width: 185px;
        padding: 5px;
        display: inline-block;
        border: 1px solid black;
      }
      .left input {
        padding: 2px;
        margin-top: 10px;
      }
      .right {
        width: 600px;
        height: auto;
        display: inline-block;
        margin-left: 30px;
        vertical-align: top;
      }
      .right table {
        border-collapse: collapse;
        width: 580px;
      }
      .right table th {
        background-color: green;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        color: #FFFFFF;
      }
      .right table tr {
        text-align: center;
      }
      .right table td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="left">
          <input type="text" placeholder="输入编号" v-model="id" />
          <input type="text" placeholder="输入名称" v-model="name" /><br />
          <input type="button" value="添加数据" @click="add" />
          <input type="text" placeholder="搜索数据" v-model="search" />
        </div>
        <div class="right">
          <table>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in searchData">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
              <td>
                <a href="javascript:void(0)" @click="del(item.id)">删除</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <script>
      //定义全局过滤器
      Vue.filter("datefmt", function (input, formatstring) {
        var result = "";
        var year = input.getFullYear();
        var month = input.getMonth() + 1;
        var day = input.getDate();
        var hour = input.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = input.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        if (formatstring == 'yyyy-mm-dd') {
          result = year + "-" + month + "-" + day;
        } else {
          result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
        }
        return result;
      })
      var vm = new Vue({
        el: '#app',
        data: {
          id: '',
          name: '',
          search: '',
          list: [{
              "id": 1,
              "name": "宝马",
              "time": new Date()
            },
            {
              "id": 2,
              "name": "奔驰",
              "time": new Date()
            }
          ]
        },
        methods: {
          del: function (id) {
            if (!confirm("是否删除数据？")) {
              return;
            }
            //调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
            var index = this.list.findIndex(function (item) {
              return item.id == id;
            });
            //调用list.splice(删除的索引，删除的元素个数)
            this.list.splice(index, 1);
          },
          add: function () {
            //包装成list要求的对象
            var tem = {
              id: this.id,
              name: this.name,
              time: new Date()
            };
            //将tem追加到list数组中
            this.list.push(tem);
            //清空页面上的文本框中的数据
            this.id = "";
            this.name = "";
          }
        },
        computed: {
          searchData: function () {
            var search = this.search;
            if (search) {
              return this.list.filter(function (name) {
                return Object.keys(name).some(function (key) {
                  return String(name[key]).toLowerCase().indexOf(search) > -1
                })
              })
            }
            return this.list;
          }
        }
      })
    </script>
  </body>
</html>

View Code

相关阅读:
桶排序
 Ultra-QuickSort
Merge Sort
Max Sum
快排
 Oil Deposits
1009: josephus问题
 A+B Again（在某个数中找大于m的最小约数）
luogu4181 [USACO18JAN]Rental Service (贪心)
luogu4185 [USACO18JAN]MooTube (并查集)
原文地址：https://www.cnblogs.com/fengxiongZz/p/8126796.html