请问这种需求应该如何做呢?现在还没有头绪
需要根据输入的input值实时变换
输入2之后完在大div中完美生成两个小div,输入5,2后,每个小div只生成一张图片,而不是五张和两张
非常感谢@Reachel,但是还有些问题
请问这种需求应该如何做呢?现在还没有头绪
需要根据输入的input值实时变换
输入2之后完在大div中完美生成两个小div,输入5,2后,每个小div只生成一张图片,而不是五张和两张
非常感谢@Reachel,但是还有些问题
提供个思路:
<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('请输入正确的数字')
}
}
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
代码如下,样式就得自己写了