js动态插入html元素与vue v-for使用方式对比

1.js动态插入html元素

<ul id="heros"></ul>

<script>
  let list = ['李白', '阿珂', '云中君', '墨子', '王昭君'];
  let ul = document.getElementById('heros');
  list.foreach(item => {
    ul.appendChild(`<li>${item}</li>`);
  });
</script>

2.vue v-for

<ul>
  <li v-for="item in list">{{item}}</li>
</ul>

<script>
  export default{
    data(){
      return{
         list = ['李白', '阿珂', '云中君', '墨子', '王昭君']
      }
    }
  }
</script>

vue使用是先定好html模板结构，操作数据，尽量不要利用js操作dom。