Vue3單擊新增添加新的input的方法

更新時間：2023年01月07日 09:55:03 作者：最帥爸爸

這篇文章主要介紹了Vue3單擊新增添加新的input,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，文中補充介紹了Vue動態(tài)綁定、添加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>

PS：Vue動態(tài)綁定、添加input

這個過程用到了Vue+element-ui

（1）首先給el-input加上v-for循環(huán)一個數(shù)據，并且v-model綁定這個數(shù)據中的屬性，這樣就可以在頁面中展示所有的input框了，

（2）動態(tài)綁定：先模擬一個傳過來或者是請求到的數(shù)據，循環(huán)遍歷這個數(shù)據，并把每個數(shù)據中的屬性賦值給之前el-input循環(huán)的那個數(shù)據中的屬性，這里推薦for-of循環(huán)。

（3）動態(tài)添加：每點擊一次就往el-input循環(huán)的那個數(shù)據中添加新的屬性

<template>
? <div class="input_test">
? ? <el-input
? ? ? placeholder="請輸入內容"
? ? ? v-for="(item, index) in modules"
? ? ? :key="index"
? ? ? v-model="item.text"
? ? ></el-input>
? ? <el-button type="success" @click="add">新增</el-button>
? </div>
</template>
?
<script>
export default {
? data() {
? ? return {
? ? ? inputList: ["inputOne", "inputTwo", "inputThree"],//模擬一個傳過來或者是請求到的數(shù)據
? ? ? modules: [
? ? ? ? {
? ? ? ? ? text: "text",
? ? ? ? },
? ? ? ],
? ? };
? },
? methods: {
? ? add() {//動態(tài)添加input框
? ? ? this.modules.push({ text: "text" });
? ? },
? },
? watch: {},
? computed: {},
? components: {},
? created() {},
? mounted() {//動態(tài)綁定input框
? ? for (const iterator of this.inputList) {
? ? ? this.modules.push({ text: iterator });
? ? }
? },
};
</script>
?
<style lang="scss" scoped></style>

到此這篇關于Vue3單擊新增添加新的input的文章就介紹到這了,更多相關Vue3新增添加新的input內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！