vue的增删改查

vue.js简单案例

• 通过vue.js实现增删改查
• 这个案例涉及了增删查
• html代码

<div id="app">
    <div class="header_con">
      <div class="header">
        <h1>手机品牌管理</h1>
        <!-- 搜索框与keyWord数据双向绑定 修饰符.trim去除首尾空格 -->
        <input type="text" placeholder="请输入搜索条件" v-model.trim='keyWord'>
      </div>
    </div>

    <div class="tb_title">
      <h3>品牌列表</h3>
      <!-- 点击新增品牌显示 -->
      <a href="javascript:;" @click='isShow=true'>新增品牌</a>
    </div>

    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- v-for遍历tr 
      index默认从0开始 
      list是固定的数组
      search中是变动的数组-->
      <!-- <tr v-for='(item,index) in list'> -->
      <tr v-for='(item,index) in search'>
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td>
          <!-- 通过index删除对应的数据 -->
          <a href="#" class="del" @click='del(index)'>删除</a>
        </td>
      </tr>
      <tr>
        <!-- 如果数组长度为0 则显示 否则隐藏 -->
        <td colspan=" 4" v-show='list.length==0'>没有品牌数据</td>
      </tr>
    </table>

    <!-- 新增品牌弹框 -->
    <!-- 默认隐藏 点击新增品牌按钮才显示 -->
    <div class="add_con" v-show='isShow'>
      <div class="add">
        <h3>新增品牌</h3>
        <div class="add_form">
          <label>品牌名称:</label>
          <!-- 文本框内容与msg双向数据绑定 通过修饰符.trim去除首尾空格 -->
          <input type="text" v-model.trim='msg' @keyup.enter='add()'>
        </div>
        <div class="btns">
          <input type="button" value="取消" @click='isShow=false'>
          <!-- 文本框键盘按下  触发add()方法 -->
          <input type="button" value="添加" @click='add()'>
        </div>
      </div>
      <div class="mask"></div>
    </div>

  </div>

moment插件下载

• js代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="moment.js"></script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: '',
      // 默认隐藏
      isShow: false,
      list: [],
      keyWord: ''
    },
    methods: {
      add() {
        //文本框不能为空
        if (this.msg == '') {
          alert('不能为空');
          //return 下面代码不在执行
          return;
        }
        this.list.push({
          name: this.msg,
          time: moment().format('YYYY-MM-DD HH:mm:ss'),
        });
        this.isShow = false;
        //清空文本框
        this.msg = ''
      },
      // 根据index删除数组中对应的数据
      //数组中删除 splice(删除的下标,删除的数量)
      del(index) {
        this.list.splice(index, 1)
      }
    },
    computed: {
    //search()方法 这个方法有复杂逻辑 所以我们写在计算属性中computed
      search: function () {
        //遍历list数组 取出每一项中的name 判断是否与搜索的内容一致 一致则追加到新数组中 然后显示在页面上
        //如果都没有一致的 indexOf结果是0 那么不等于-1 会把所有都push到新数组中并显示
        let newList = [];
        // 注意 这里list在vue实例化对象中 要用this点出
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].name.indexOf(this.keyWord) != -1) {
            newList.push(this.list[i])
          }
        }
        //最后将新数组return给search方法
        return newList;
      }
    },
  })
</script>

• css代码

 body {
      margin: 0px;
    }

    .header_con {
      height: 60px;
      background-color: #101010;
      overflow: hidden;
    }

    .header {
      width: 960px;
      margin: 0px auto;
      overflow: hidden;
    }

    .header h1 {
      margin: 0px;
      padding: 0px;
      font-size: 22px;
      line-height: 60px;
      font-weight: normal;
      color: #f1f1f1;
      letter-spacing: 1px;
      float: left;
    }

    .header input {
      float: right;
      width: 240px;
      height: 30px;
      text-indent: 10px;
      border-radius: 4px;
      margin-top: 15px;
      border: 0px;
      outline: none;
    }

    .tb_title {
      width: 960px;
      height: 40px;
      margin: 20px auto 0;
      background-color: #3366cc;
      overflow: hidden;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .tb_title h3 {
      margin: 0px;
      padding: 0px;
      line-height: 40px;
      font-size: 16px;
      font-weight: normal;
      text-indent: 15px;
      float: left;
      color: #fff;
    }

    .tb_title a {
      float: right;
      text-decoration: none;
      background-color: #f3cd57;
      color: #2c2203;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 4px;
      margin: 7px 15px 0 0;
    }

    .tb_title a:hover {
      border: 1px solid rgba(255, 255, 255, 0.6);
      background-color: transparent;
      color: #fff;
    }

    .tb {
      border-collapse: collapse;
      width: 960px;
      margin: 0 auto;
    }

    .tb th {
      background-color: #f1f1f1;
      color: #333;
      font-size: 14px;
    }

    .tb td,
    .tb th {
      padding: 10px 0;
      border: 1px solid #999;
      text-align: center;
    }

    .tb td {
      color: #666;
      font-size: 14px;
    }

    .del {
      text-decoration: none;
      color: #f90
    }

    .add {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -100px;
      width: 400px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #999;
      border-radius: 4px;
      z-index: 100;
    }

    .add h3 {
      padding: 0px;
      margin: 0px;
      background-color: #3366cc;
      color: #fff;
      font-size: 16px;
      font-weight: normal;
      line-height: 40px;
      text-indent: 15px;
    }

    .add_form {
      margin: 30px 0 0 50px;
    }

    .add_form label {
      font-size: 14px;
      padding-right: 10px;
    }

    .add_form input {
      width: 200px;
      height: 24px;
      border: 1px solid #ccc;
      outline: none;
      text-indent: 10px;
      border-radius: 4px;
    }

    .btns {
      border-top: 1px solid #ccc;
      margin-top: 50px;
      padding-right: 10px;
    }

    .btns input {
      width: 62px;
      height: 30px;
      border: 1px solid #dadce0;
      border-radius: 4px;
      background-color: #fff;
      float: right;
      margin: 10px 10px 0 0;
      outline: none;
      cursor: pointer;
      ;
    }

    .btns input:last-child {
      background-color: #669df6;
      color: #fff;
      border-color: #5793f6;
    }

    .mask {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 99;
    }