【转】VUE2 表格绑定

资料及内容来自黑马程序员
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <style>
        :root {
          font-size: 13px;
        }
  
        body {
          padding: 8px;
        }
      </style>
</head>
<body>
    <div id="app">
        <div class="card">
            <h5 class="card-header">添加品牌</h5>
            <div class="card-body">
              <!-- 添加品牌的表单 -->
              <form class="form-inline" @submit.prevent>
                <div class="input-group mb-2 mr-sm-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">品牌名称</div>
                  </div>
                  <!-- 文本输入框 -->
                  <input type="text" class="form-control" v-model.trim="brandname" @keyup.esc="brandname = ''" />
                </div>
    
                <!-- 提交表单的按钮 -->
                <button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
              </form>
            </div>
        </div>

        <table class="table table-bordered table-striped mt-2">
                <thead>
                    <tr>
                          <th>#</th>
                        <th>品牌名称</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="(item, index) in brandlist" :key="item.id">
                        <td>{{index + 1}}</td>
                        <td>{{item.brandname}}</td>
                        <td>
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state" />
                            <label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
                            <label class="custom-control-label" :for="item.id" v-else>已禁用</label>
                          </div>
                        </td>
                        <td>{{item.addtime | dateFormat}}</td>
                        <td>
                            <a href="#" @click.prevent="removeBrand(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody> 
        </table>
    </div>


    <script src="./lib/vue-2.6.12.js"></script>
    <script>
           // 创建全局的过滤器
           Vue.filter('dateFormat', (dateStr) => {
            const dt = new Date(dateStr)

            const y = dt.getFullYear()
            const m = padZero(dt.getMonth() + 1)
            const d = padZero(dt.getDate())

            const hh = padZero(dt.getHours())
            const mm = padZero(dt.getMinutes())
            const ss = padZero(dt.getSeconds())

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
          })
      // 补零的函数
      function padZero(n) {
        return n > 9 ? n : '0' + n
      }

        const vm = new Vue({
            el: '#app',
            data:{
              brandname: '',
              nextId: 4,
                brandlist:[
                    {id:1,brandname:'宝马',state:true,addtime: new Date()},
                    {id:2,brandname:'奥迪',state:true,addtime: new Date()},
                    {id:3,brandname:'奔驰',state:true,addtime: new Date()}
                ]
            },
            methods: {
                // 添加新的品牌数据
                addNewBrand() {
                  // 判断品牌名称是否为空
                  if (!this.brandname) 
                    return alert('品牌名称不能为空！')
                  // 添加新的品牌数据
                  this.brandlist.push({
                    id: this.nextId,
                    brandname: this.brandname,
                    state: true,
                    addtime: new Date(),
                  })
                  // 重置文本框的值
                  this.brandname = ''
                  // 让 nextId 自增 +1
                  this.nextId++
                },
                // 根据 Id 删除对应的数据
                removeBrand(id) {
                  this.brandlist = this.brandlist.filter((x) => x.id !== id)
                },
            }
        })
    </script>
</body>
</html>
posted on 2022-10-23 10:31 z5337 阅读(66) 评论(0) 编辑收藏举报
【转】VUE2 表格绑定

搜索

常用链接

我的标签

积分与排名

随笔档案

阅读排行榜
