JavaScript --- 功能实现

1. 模糊匹配

1. es5
    const arr = ['red','blue','green','orange','abc','xyz']
    let input = 'e'
    let a = arr.filter((item,index) =>{
      return item.indexOf(input) != -1 //找到啦
    })
    console.log(a) //["red", "blue", "green", "orange"]
    
2. es6 includes对数据进行检测
    const arr = ['red','blue','green','orange','abc','xyz']
    let input = 'e'
    let a = arr.filter((item,index) =>{
      return item.includes(input) //找到啦
    })
    console.log(a) //["red", "blue", "green", "orange"]

2. 表格的增删改查(方式一)

<script setup>
import {ref} from "vue";
import image1 from '../assets/img/LoginRegister/1.jpg'



const form = ref({
  name: '',
  gender: '',
  age: '',
  image: ''
})
const tableData = ref([
  {
    name: '张三',
    gender: '男',
    age: 25,
    image: image1
  },
])
const text = ref('')
const obj = ref({})
const isEdit = ref(false)
const idx = ref(null)

//添加操作
const addItem = () =>{
  if(form.value.name){
    tableData.value.push({
      name: form.value.name,
      gender: form.value.gender,
      age: form.value.age,
      image: form.value.image
    })
  }
}
//保存操作
const handleSave = () =>{
  //1.原来的位置 2.删除个数 3.添加的内容
  tableData.value.splice(idx.value,1,{
    name: form.value.name,
    gender: form.value.gender,
    age: form.value.age,
    image: form.value.image
  })
}
//编辑操作
const handleEdit = (index) =>{
  //状态切换按钮
  isEdit.value = true
  //点击编辑将信息返回到表单(利用拷贝)
  obj.value = Object.assign({},tableData.value[index])
  form.value = obj.value
  //纪录当前信息的索引(保存时用)
  idx.value = index
}
//删除操作
const handleDel = (index) =>{
  if(confirm('确认删除该信息嘛?')){
    tableData.value.splice(index,1)
  }
}
//模糊查询操作
const handleFind = () =>{
  let a = tableData.value.filter(item =>{
    return item.name.includes(text.value)
  })
  console.log(a)
}
</script>

<template>
  <div>
    姓名：<input type="text" v-model="form.name">
  </div>
  <div>
    性别：<input type="text" v-model="form.gender">
  </div>
  <div>
    年龄：<input type="text" v-model="form.age">
  </div>
  <div>
    照片：<input type="text" v-model="form.image">
  </div>
  <div>
    <button @click="addItem" v-if="!isEdit">添加</button>
    <button @click="handleSave" v-else="isEdit">保存</button>
  </div>
  <div>
    <input type="text" v-model="text">
    <button @click="handleFind">模糊查询</button>
  </div>
  <div class="table">
    <table border="1" cellspacing="0" cellpadding="0" >
      <tr>
        <td height="40" width="100px" align="center">姓名</td>
        <td height="40" width="100px" align="center">性别</td>
        <td height="40" width="100px" align="center">年龄</td>
        <td height="40" width="100px" align="center">图片</td>
        <td height="40" width="100px" align="center">操作</td>
      </tr>
      <tr v-for="(item,index) of tableData" :key="index">
        <td height="40" width="100px">{{ item.name }}</td>
        <td height="40" width="100px">{{ item.gender }}</td>
        <td height="40" width="100px">{{ item.age }}</td>
        <td height="40" width="100px">
          <img style="width: 100%;height: 100%" :src="item.image" alt="">
        </td>
        <td>
          <button @click="handleEdit(index)">编辑</button>
          <button @click="handleDel(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

2. 表格的增删改查(方式二)

<script setup>
import {ref} from "vue";
import image1 from '../assets/img/LoginRegister/1.jpg'



const form = ref({
  name: '',
  gender: '',
  age: '',
  image: ''
})
const tableData = ref([
  {
    name: '张三',
    gender: '男',
    age: 25,
    image: image1,
    isEdit: false,
  },
])
const text = ref('')
const idx = ref(null)

//添加操作
const addItem = () =>{
  if(form.value.name){
    tableData.value.push({
      name: form.value.name,
      gender: form.value.gender,
      age: form.value.age,
      image: form.value.image
    })
  }
}
//保存操作
const handleSave = (index) =>{
  if(tableData.value[index].name){
    tableData.value[index].isEdit = false
  }else{
    alert('不能保存,请输入有效的名字')
  }
}
//编辑操作
const handleEdit = (index) =>{
  tableData.value[index].isEdit = true
}
//删除操作
const handleDel = (index) =>{
  if(confirm('确认删除该信息嘛?')){
    tableData.value.splice(index,1)
  }
}
//模糊查询操作
const handleFind = () =>{
  let a = tableData.value.filter(item =>{
    return item.name.includes(text.value)
  })
  console.log(a)
}
</script>

<template>
  <div>
    姓名：<input type="text" v-model="form.name">
  </div>
  <div>
    性别：<input type="text" v-model="form.gender">
  </div>
  <div>
    年龄：<input type="text" v-model="form.age">
  </div>
  <div>
    照片：<input type="text" v-model="form.image">
  </div>
  <div>
    <button @click="addItem">添加</button>
  </div>
  <div>
    <input type="text" v-model="text">
    <button @click="handleFind">模糊查询</button>
  </div>
  <div class="table">
    <table border="1" cellspacing="0" cellpadding="0" >
      <tr>
        <td height="40" width="100px" align="center">姓名</td>
        <td height="40" width="100px" align="center">性别</td>
        <td height="40" width="100px" align="center">年龄</td>
        <td height="40" width="100px" align="center">图片</td>
        <td height="40" width="100px" align="center">操作</td>
      </tr>
      <tr v-for="(item,index) of tableData" :key="index">
        <td height="40" width="100px">
          <input type="text" v-if="item.isEdit" v-model="item.name">
          <p v-else>{{ item.name }}</p>
        </td>
        <td height="40" width="100px">
          {{ item.gender }}
        </td>
        <td height="40" width="100px">
          {{ item.age }}
        </td>
        <td height="40" width="100px">
          <img style="width: 100%;height: 100%" :src="item.image" alt="">
        </td>
        <td>
          <button @click="handleEdit(index)" v-if="!item.isEdit">编辑</button>
          <button @click="handleSave(index)" v-else>保存</button>
          <button @click="handleDel(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>