对于电商尺码跟颜色组成的表格输入框，对输入框的操作

上代码 这是使用uniapp的代码

 

<template>
    <view class="content">
        <view class="itop">
            <view class="Btop">
                
            </view>
            <view class="Btop" v-for="(item,index) in size" :key='index'>
                {{item}}
            </view>
        </view>
        <view class="">
            <view class="" v-for="(item,index) in color" :key='index'>
                <view class="ibott">
                    <view class="Bbott">
                        {{item}}
                    </view>
                    <view class="Bbott" v-for="(item1,index1) in size" :key='index1'>
                        <input type="number" value="" v-model="inp[item1+'-'+item]"/>
                        
                    </view>
                </view>
            </view>
        </view>
        <view class="" @click="ilog">
            输出
        </view>
    </view>
</template>

<script>
    
    export default {
        data() {
            return {
                size:['x','xl','xxl','xxxl','xxxxl'],
                color:['黑色','红色','白色','蓝色','绿色'],
                inp:{},
            }
        },
        onLoad() {
            
        },
        watch:{
            
        },
        mounted() {
            this.size.forEach((k)=>{
                this.color.forEach((v)=>{
                    this.inp[k+'-'+v]='';
                })
            })
        },
        methods: {
            ilog(){
                console.log(this.inp);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
        width: 100%;
    }
    .itop{
        width: 100%;
        height: 54rpx;
    }
    .Btop{
        width: 100rpx;
        height: 50rpx;
        border: 1rpx solid #18B566;
        float: left;
    }
    .ibott{
        width: 100%;
        height: 54rpx;
        
    }
    .Bbott{
        width: 100rpx;
        height: 50rpx;
        border: 1rpx solid #2979FF;
        float: left;
    }
</style>