vue动态添加删除数据

最新推荐文章于 2024-03-01 14:13:43 发布

原创最新推荐文章于 2024-03-01 14:13:43 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #动态添加删除数据

Vue 专栏收录该内容

28 篇文章

订阅专栏

博客围绕Vue动态添加删除数据展开，虽未给出详细内容，但从标签可知核心是利用Vue技术实现数据的动态操作，这在前端开发中较为常见，能提升页面交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>vue动态添加删除数据</h3>
    <input class="addWord" v-model.lazy="name" @focus="" @blur="nameVertify" @keyup.enter="$event.target.blur" type="text" placeholder="姓名"/>
    <input class="addWord" v-model.lazy="age" @blur="ageVertify" @keyup.enter="$event.target.blur" type="number" placeholder="年龄"/>
    <input class="addWord" v-model.lazy="sex" @blur="sexVertify" @keyup.enter="$event.target.blur" type="text" placeholder="性别"/>
    <input class="addWord" v-model.lazy="tel" @blur="telVertify" @keyup.enter="$event.target.blur" type="number" placeholder="联系方式"/>
    <input class="addWord" v-model.lazy="id" @blur="idVertify" @keyup.enter="$event.target.blur" type="number" placeholder="工号"/>
    <button @click="addUser">添加</button>
    <span class="unshow" :class="{show:show}" v-model="alertWord">{{alertWord}}</span>
    <hr>
    <table>
      <caption>用户信息表</caption>
      <tr>
        <th class="center">序号</th>
        <th class="center">姓名</th>
        <th class="center">年龄</th>
        <th class="center">性别</th>
        <th class="center">联系方式</th>
        <th class="center">工号</th>
        <th class="center">操作</th>
      </tr>
      <tr v-for="(user,index) in users">
        <th class="center">{{index+1}}</th>
        <th class="center">{{user.name}}</th>
        <th class="center">{{user.age}}</th>
        <th class="center">{{user.sex}}</th>
        <th class="center">{{user.tel}}</th>
        <th class="center">{{user.id}}</th>
        <th class="center">
          <button @click="deleteUser(index)">删除</button>
        </th>
      </tr>
      <tr v-show="users.length!=0">
        <td colspan="7" class="right">
          <button @click="deleteUser('-2')">删除全部</button>
        </td>
      </tr>
      <tr v-show="users.length==0">
        <td colspan="7"  class="center">
          <p>暂无数据...</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue 属性练习',
      users:[],
      name:'',
      age:'',
      sex:'',
      tel:'',
      id:'',
      alertWord:'',
      show:false
    }
  },
  methods:{
    addUser:function(){
      var name = this.name.trim();
      var age = this.age;
      var sex = this.sex.trim();
      var tel = this.tel;
      var id = this.id;
      if(name!=""&&age!=""&&sex!=""&&tel!=""&&id!=""){
        this.users.push({
          name:name,
          age:age,
          sex:sex,
          tel:tel,
          id:id
        })
        this.name = "";
        this.age = "";
        this.sex = "";
        this.tel = "";
        this.id = "";
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '请输入完整的用户信息';
      }
    },
    deleteUser:function(index){
      if(index == "-1"){
        this.users = [];
      }else{
        this.users.splice(index,1);
      }
    },
    nameVertify:function(){
      var name = this.name.trim();
      if(name != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '姓名输入有误，请重新输入';
      }
    },
    ageVertify:function(){
      var age = this.age;
      if(age != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '年龄输入有误，请重新输入';
      }
    },
    sexVertify:function(){
      var sex = this.sex.trim();
      if(sex != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '性别输入有误，请重新输入';
      }
    },
    telVertify:function(){
      var tel = this.tel;
      if(tel != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '电话输入有误，请重新输入';
      }
    },
    idVertify:function(){
      var id = this.id;
      if(id != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '工号输入有误，请重新输入';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-weight: normal;
}
th{
  width: 80px;
}
a {
  color: #42b983;
}
.unshow{
  opacity: 0;
}
  .show{
    opacity: 1;
    color: red;
  }
  .right{
    text-align: right;
  }
  .center{
    text-align: center;
  }
</style>

引用

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <HelloWorld></HelloWorld>
    <!--<router-view/>-->
  </div>
</template>

<script>
  // 导入组件
  import HelloWorld from './components/HelloWorld'
  export default {
    name: 'app',
    components: {
      HelloWorld
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  margin-top: 60px;
}
</style>

结果：
在这里插入图片描述