vue动态插入HTML(dom)

某个dom内动态插入多个dom

父元素：
      <div id="parent"></div>

插入的数据：
      list:[
          {key:'0',name:'河北'},{key:'1',name:'河南'},{key:'2',name:'北京'},{key:'3',name:'湖南'}
      ],

可能想到代码

    addChildren(){
      let element = document.getElementById('parent')
      element.innerHTML = `<div v-for="item in list" :key = 'item.key'>item.name</div>`
    }

实际上这段代码是错误的，这里的Vue模板语法无法解析

正确的代码

    addChildren(){
      let element = document.getElementById('parent')
      element.innerHTML = `
                            <div>${this.list[0].name}</div>
                            <div>${this.list[1].name}</div>
                            <div>${this.list[2].name}</div>
                            <div>${this.list[3].name}</div>
                          `
    }

简写的代码

    addChildren(){
      let element = document.getElementById('parent')
      element.innerHTML = `${this.list.map(item => `<div>${item.name}</div>`).join('')}`
    }

运行结果