首页 > 其他分享 >Vue3单击新增添加新的input

Vue3单击新增添加新的input

时间:2023-01-07 09:33:39浏览次数:42  
标签:单击 items 新增 添加 Vue3 input

 

效果图:

 

代码:

<template>
  <div>
    <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i" @input="inp"> 
    <button @click="onAdd">添加</button>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      items: [""]
    }
  },
  methods: {
    onAdd() {
      if(this.items.length<5){
        this.items.push('')
      }else{
        alert("以达到上限")
      }
    },
    inp(){
      console.log(this.items)
    }
  }
}
</script>

 

标签:单击,items,新增,添加,Vue3,input
From: https://www.cnblogs.com/zsbb/p/17032134.html

相关文章

  • Vue3 中的响应式api
    一、setup文件的认识 特点1:script中间的内容就是一个对象特点2:script在第一层定义的方法或者变量=>就是这个对象属性 =>顶层的绑定回被暴露给模板(模......
  • Vue2和Vue3实现响应式原理
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>Document</title> </head> <body> <scripttype="text/javascript"> //源数据 letpers......
  • Java将OutputStream转为InputStream
    遇见的问题:做文件处理时,有两个工具类,一个是生成文件,需要一个OutputStream来写出,一个是上传文件,需要一个InputStream来读取类似代码://wordObj处理之后需要写出到一个输出......
  • vue3+vite配置多页面
    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度。比如我们有很多H5页面,并且相互独立,比如报修,购卡,计价规则等等,那我们如......
  • vite+vue3项目在chrome中debuger源码
    在vue文件的script中打上一个debugger,本以为可以开心的debugger了,结果控制台看到的是这个样子查了一些方案,这样就可以解决了......
  • vue3+ts利用el-table实现可编辑的表格
    说明在对表格数据进行操作时,如果数据项比较少,可通过自定义实现直接在表格中编辑。界面展示实现要点使用slot来自定义单元格,实现输入、选择等操作使用slot来自定义表......
  • 监听input组件的内容改变,并进行实时响应
    监听input组件的内容改变,并进行实时响应危笑演绎总有人要赢的,那为什么不是你?  在开发中,有时我们需要对 input 的 value 值变化作实时响应。......
  • Python中的注释和input函数的使用
    注释:一.最基础也是最常用的注释是#注释内容 快捷键ctrl+/ 适用多个代码集成工具都是这个快捷键Python使用井号#作为单行注释的符号,语法格式为:#注释内容从井号......
  • vue3 mock获取数据
    创建api文件夹,在文件夹中创建mockAjax.js,和请求数据的api.js。importaxiosfrom'axios'importnprogressfrom'nprogress'import'nprogress/nprogress.css'const......
  • vue2 转 vue3+ts
    1.vite创建一个vue3+ts的项目2.依赖转变复制vue2package项目依赖。修改vue-router3=>vue-router4;vuex4=>pinia ;Ui库vant2=>vant4main.js 转换为 ......