正常vue中插入节点会报这个错:

原因:插入的不是节点,而是一个字符串,需要将这个字符串变为对象才能插入到HTML中
在这里插入图片描述

简单几步:

1、创建新节点
2、将新节点替换要插入的标签(innerHTML方法)
3、将节点插入到页面指定的标签中(appendChild()方法)
<template>
  <div class="home">
    <h1 ref="home">首页(发现音乐)
      <h2>有数据</h2>
    </h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.test();
  },
  methods: {
    test() {
      let str = 'dont tel me what to do';   //创建字符串
      let newstr = str.anchor('english')    //将字符串变为a标签其中name为English
      let a = document.createElement('a')   //创建新标签
      a.innerHTML = newstr;                 //将新标签替换为a标签
      this.$refs.home.appendChild(a)        //将标签插入到指定标签中
    }
  }
}
Logo

前往低代码交流专区

更多推荐