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

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

clipboard.png

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

clipboard.png

clipboard.png

阅读 24.8k
5 个回答

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

<!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>

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

提供个思路:

<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处理,我就不写了。。。
    }
  }
}

思路就是用数组配和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('请输入正确的数字')
    }
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题