问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用vue动态的添加与生成元素？

头像
Noiya
    25244460

    请问这种需求应该如何做呢？现在还没有头绪
    需要根据输入的input值实时变换

    clipboard.png

    输入2之后完在大div中完美生成两个小div，输入5,2后，每个小div只生成一张图片，而不是五张和两张
    非常感谢@Reachel，但是还有些问题

    clipboard.png

    clipboard.png

    javascriptvue.jsnode.jshtmlhtml5
    阅读 24.8k
    5 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      代码如下，样式就得自己写了

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="vue.js"></script>
    <style>
        .box{width:500px;border:1px solid #e7e7e7;min-height: 400px;margin-top: 100px;}
    </style>
</head>
<body>
    <div class="wrap">
        <input type="text" placeholder="请输入要生成的div个数" v-model="divCount" @blur="blur">
        <div class="inputs">
            <input type="text" v-for="(item,index) in boxs" v-model="item.imgCount" @blur="blurInput(index)">
        </div>

        <div class="box">
            <div v-for="item in boxs">
                <img :src="img.src" alt="" v-for="img in item.imgs">
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el:'.wrap',
            data:{
                divCount:'',
                boxs:[],
            },
            methods:{
                blur:function(){
                    for(var i=0;i<this.divCount;i++){
                        var data = {imgCount:0,imgs:[]}
                        this.boxs.push(data)
                    }
                },
                blurInput:function(index){
                    for(var i=0;i<this.boxs[index].imgCount;i++){
                        var data = {src:'https://cn.vuejs.org/images/logo.png'}
                        this.boxs[index].imgs.push(data)
                    }
                }
            }
        })
    </script>
</body>
</html>
      头像
      七凉
        1.2k22446

        v-model来绑定输入的数量，根据这个数量来生成div字符串，用v-html嵌入

        头像
        叶不修
          6011110
          头像
          小风哥
            6011211

            提供个思路：

            <input v-model="imageNum" @keypress="change">
<div v-for="(image,index) in images" v-bind:key="image">{{image.url}}</div>

            js代码：

            export default {
  data () {
    return {
      imageNum:0,
      images:[]
    }  
  },
  method:{
    change: function () {
      images.push({url:'图片地址'})
      // 当然您也可以做些action, mutation处理,我就不写了。。。
    }
  }
}
            头像
            Niki
              11618

              思路就是用数组配和v-for就行了

              html布局

              <el-card>
//控制input框个数的input框
  <el-row>
    <el-input v-model="inpNum"
              @blur="createInp"
              style="width: 200px"
    ></el-input>
  </el-row>
//指定个数的input框
  <div style="margin-top: 20px;">
    <el-input v-for="(val,idx) in inpArr"
              :key="idx"
              v-model="inpArr[idx]"
              style="width: 120px;margin: 0 5px"
    ></el-input>
  </div>
  <div style="margin-top: 20px">
    <el-button type="primary" @click="createDiv">创建Div</el-button>
  </div>
</el-card>
//div生成
<el-card>
  <div v-for="(v,i) in divArr"
       class="img-box"
  >
    <p v-for="(val,idx) in v"
       class="img"
    >
      image
    </p>
  </div>
</el-card>

              绑定的数据

              data() {
  return {
    inpNum: null,
    inpArr: [],
    divArr: [],
  }
}

              methods

              methods:{
 createInp() {
    this.inpNum = parseInt(this.inpNum);
    this.inpArr = [];
    for (let i = 0; i < this.inpNum; i++) {
      this.inpArr.push('');
    }
  },
  createDiv() {
    let nums = this.inpArr;
    let divArr = [];
    nums = nums.map(v => Number(v));
    let flag = nums.every(val => {
      return !isNaN(val);
    });
    if (flag) { //整理divArr
      for (let i = 0; i < nums.length; i++) {
        divArr.push([]);
        let item = nums[i];
        for (let j = 0; j < item; j++) {
          divArr[i].push('img');
        }
      }
      this.divArr = divArr;
    } else {
      this.$message.warning('请输入正确的数字')
    }
  }
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题