Vue点击新增div等元素

Vue点击新增div等元素

https://www.yzktw.com.cn/post/1255087.html

<template>
 <div id="MyPage">

  <div class="wrapper">
    <!-- 显示界面 -->
     <div class="show">
        <!-- 遍历所有roi区域 -->
        <ul v-for="(item,index) in itemList" :key="item.imgUrl">
            <li @click="showFunctions(item.imgUrl,item.id)">
                <!-- 图像  -->
                <img :src="item.imgUrl" alt="" width="150" height="150">
                <!-- 信息 -->
                <p>{{item.id}}</p>
                <!-- 识别结果信息 -->

                <div v-if="boxes[index].length > 0">
                     <div v-for="(item2 ,index2) in boxes[index]"  :key="item2.id">
                          <img src="9.jpg" alt="" width="150" height="150">
                          <p>score:0.9  0.8  0.96</p>
                          <p>class: dent scratch ddd</p>
                     </div>

                </div>
                <!-- <div v-for="(item2,index2) in boxes" :key="item2.id">
                  <div v-if="item2.length > 0">
                       xxx {{item2.length}}
                      <div class="box">{{item2}}</div>
                      <img src="9.jpg" alt="" width="150" height="150">
                      <p>score:0.9  0.8  0.96</p>
                      <p>class: dent scratch ddd</p>

                  </div>

                </div> -->
            </li>
        </ul>
     </div>
     
     <!-- 参数设置 -->
     <div v-show="showType=='page1'">
      <label >参数</label>
      <input type="text" name="username" placeholder="epoch"  key ="email"> <!-- key可以阻止重用 -->
      <!-- 提交按钮 -->
     <el-button type="primary" @click="detect()">测试</el-button>
    </div>

  </div>

 </div>
</template>


<script>
  export default {
    data() {
      return {
      showType:"page",
      detectImgUrl :'',

      itemList:[
        {id:"1",imgUrl:'9.jpg'},
        {id:"2",imgUrl:'9.jpg'},
        {id:"3",imgUrl:'9.jpg'},
      ],
      boxes:[
        [{id:"1",imgUrl:'9.jpg'},{id:"1",imgUrl:'9.jpg'},],
        [{id:"1",imgUrl:'9.jpg'}],
        [],
      ],
      }
    },
    methods: {
      addBox(){

      },
      onSubmit() {
        console.log('submit!');
      },
      showFunctions(imgUrl,id){
        this.showType ="page1";
        this.detectImgUrl = imgUrl;
        this.detectId = Number(id);
      },
      detect(){
        // 根据 this.detectImgUrl获取识别结果并显示
        alert(this.detectImgUrl,this.detectId)
        // this.boxes.push('Box ' + (this.boxes.length + 1));

        this.showType ="page2";
      },
    }
  }
</script>

<style scoped>

.wrapper{
  background-color: pink;
  margin:auto auto;
  display: flex;
  justify-content: space-between;

}

.wrapper .show{
  display: flex;
}

.wrapper .show ul li{
  padding: 15px 15px;
}


.wrapper .show ul li:hover{
  background-color: blue;
}

</style>