vue动态添加删除数据

博客围绕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>

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

在这里插入图片描述

### Vue动态添加删除组件 在 Vue 应用程序中,可以利用 `<component>` `v-if` 或者 `v-show` 指令来实现组件的动态加载与卸载。为了更好地管理这些操作,通常会结合 JavaScript 的逻辑控制来进行。 #### 使用 `<keep-alive>` 缓存动态组件 当涉及到频繁切换但又不想每次都重新渲染的情况时,`<keep-alive>` 是非常有用的工具。它可以包裹住需要缓存的动态组件,在组件被移除后仍然保持其状态而不丢失[^1]。 ```html <!-- 动态组件 --> <div id="app"> <!-- :is绑定当前激活的组件名称 --> <button @click="currentComponent = 'ComponentA'">Load A</button> <button @click="currentComponent = 'ComponentB'">Load B</button> <!-- 使用 keep-alive 包裹 component 标签以启用缓存机制 --> <keep-alive> <component :is="currentComponent"></component> </keep-alive> <!-- 渲染区域 --> <div v-if="showComponentC"> <ComponentC /> </div> <button @click="toggleComponentC">Toggle C</button> </div> ``` ```javascript // 定义两个简单的组件 ComponentA ComponentB const ComponentA = { template: '<p>This is Component A!</p>' } const ComponentB = { template: '<p>This is Component B!</p>' } new Vue({ el: '#app', components: { ComponentA, ComponentB, ComponentC: { template: '<p>This is Component C, toggle me!</p>' } // 可选显示/隐藏的组件 }, data() { return { currentComponent: '', showComponentC: false }; }, methods: { toggleComponentC() { this.showComponentC = !this.showComponentC; } } }); ``` 这段代码展示了如何通过改变 `currentComponent` 数据属性值来决定哪个组件应该呈现给用户;而点击按钮则用于触发该数据的变化。对于 `ComponentC` 而言,则是直接使用了 `v-if` 控制它的存在与否。 #### 关于销毁组件后的清理工作 每当一个组件被销毁时(即不再存在于 DOM),Vue 自动执行一些必要的清理动作,比如解绑事件监听器以及清除计时器等。然而有时候可能还需要自定义额外的清理逻辑,这时可以在组件内部定义 `beforeDestroy` 生命周期钩子函数来做相应的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值