碼上快樂

相關內容    簡體    繁體

Vue小案例（一）

本文轉載自   查看原文   2017-12-27 17:27   1945    vue.js

案例需求：

創建一個品牌展示表格，表頭有編號（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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 nodeJs + vue.js 小案例 前端框架Vue自學之Vue router小案例TabBar（七） vue 使用echarts 一個小案例 寬度自適應 Vue小案例 之 商品管理------添加商品 Vue(小案例）底部tab欄和頂部title欄的實現 淺談Vue與swiper輪播圖框架結合小案例 vue part3.1 小案例 comments評論頁 Vue(小案例_vue+axios仿手機app)_圖片列表操作 Vue(小案例_vue+axios仿手機app)_圖文列表實現 Vue3教程：用 Vue3 開發小程序，這里有一份實際的代碼案例！
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM