Vue获取数据和简单的增删、输入框聚焦自定义指令

- 需求：1.点击删除按钮删除数据 2.点击添加按钮添加数据

我在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue.js"></script>
  <style>

    #app{
            width:600px;
                margin:10px auto;
        }
          .tb{
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th{
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div id="app">
    <div class="add">
      <!-- 3.2 使用双向数据绑定获取input框的值 -->
      编号:<input type="text" v-model="newId">
      品牌名称:<input type="text" v-model="newName" v-myfocus>
      <!-- 3.1 绑定事件 -->
      <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <!-- 1.2 在tr中使用v-for -->
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <!-- 2.1 绑定事件,传递删除项的索引 -->
            <button @click="deleteData(index)">删除</button>
          </td>
        </tr>
        <!-- 1.3当数组list长度为0时，显示 -->
        <tr v-if="list.length === 0">
          <td colspan="4">没有品牌数据</td>
        </tr>
        <!-- 动态生成内容tr -->
      </table>
    </div>
  </div>
</body>
<script>
  // 5.1 使用Vue.directive()方法创建全局自定义指令。现在需求，创建一个v-myfocus指令
  // 该函数有两个参数
  // 1. 自定义指令的名字，不能带v-, 使用全小写
  // 2. 一个对象，对象内部有一些配置项
  Vue.directive('myfocus', {
    // 5.2 这个对象配置项中，有很多方法，重点关注inserted方法，它表示当指令插入到标签中时，自动执行
    inserted(el) {
      el.focus()
    }
  })
  let vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      // 1.1 创建假数据
      list: [{
          id: 1,
          name: 'CC',
          ctime: new Date()
        },
        {
          id: 2,
          name: 'Nike',
          ctime: new Date()
        },
        {
          id: 3,
          name: '阿迪',
          ctime: new Date()
        },
      ]
    },
    methods: {
      // 2.2 定义删除数据函数
      deleteData(idx) {
        this.list.splice(idx, 1)
      },
      // 3.3 使用push方法追加数据
      addData() {
        this.list.push({
          id: this.newId,
          name: this.newName,
          ctime: new Date()
        })
        // 3.4 添加完成清空input框
        this.newId = ''
        this.newName = ''
      }
    }
  })
</script>

</html>

获取数据

在 data 中添加
一个名称为list的变量，类型为数组,存放品牌数据的对象,格式为:{id:1,name:‘宝马’,ctime:Date()

}

var vm = new Vue({
  el: '#app',
  data: {
    list: [
      {id: 1, title: 'LV', ctime: new Date()},
      {id: 2, title: 'CC', ctime: new Date()},
      {id: 3, title: 'CK', ctime: new Date()},
    ]
  }
})

在table中的“动态生成内容tr”位置使用v-for指令遍历list数组数据生成表格内容行，注意要写:key

<tr v-for="(item, index) in list" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
        <td>{{item.ctime}}</td>
        <td>
          <a href="javascript:void(0)">删除</a>
        </td>
 </tr>

处理 “没有品牌数据” --> 利用：v-if进行判断，当list为空时，才显示没有品牌数据

 <tr v-if="list.length==0">
    <td colspan="4">没有品牌数据</td>
</tr>

删除

监听删除按钮click事件，执行deleteData(),在这个函数中传递数据项的索引
<button @click="deleteData(index)">删除</button>
在函数定义时，根据索引，调用splice方法删除

methods:{
	// 定义删除数据函数
      deleteData(idx) {
        this.list.splice(idx, 1)
      }
}

添加

1.给添加按钮click绑定addData

      <input type="button" value="添加" @click="addData">

2.用两个v-model和input框进行双向数据绑定，v-model命名不能是一样的

 编号:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
 品牌名称:<input type="text" v-model="newName" ref="nameRef">

直接addData()函数中使用push方法向list数组中追加数据
methods: { // 使用push方法追加数据 addData() { this.list.push({id: this.newId, name: this.newName, ctime: new Date()}) // 添加完成清空input框 this.newId = '' this.newName = '' } }

输入框聚焦自定义指令

HTML代码

//
编号:<input type="text" v-model="newId" v-myfocus>
品牌名称:<input type="text" v-model="newName" v-myfocus>

js代码

// 使用Vue.directive()方法创建全局自定义指令。现在需求，创建一个v-myfocus指令
  // 该函数有两个参数
  // 1. 自定义指令的名字，不能带v-, 使用全小写
  // 2. 一个对象，对象内部有一些配置项
  Vue.directive('myfocus', {
    // 这个对象配置项中，有很多方法，重点关注inserted方法，它表示当指令插入到标签中时，自动执行
    inserted(el, binding) {
      console.log('指令插入到标签中了');
      el.focus()
    }
  })

Vue获取数据和简单的增删、输入框聚焦自定义指令

- 需求：1.点击删除按钮删除数据 2.点击添加按钮添加数据

完整代码

获取数据

删除

添加

输入框聚焦自定义指令

猜你喜欢