vue中向html插入节点标签（简单易懂）

正常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为Englishlet a = document.createElement('a')   //创建新标签a.innerHTML = newstr;                 //将新标签替换为a标签this.$refs.home.appendChild(a)        //将标签插入到指定标签中}}
}

vue中向html插入节点标签（简单易懂）相关推荐

深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
Vue中使用file类型input标签，无法使用reset方法清空已经选择的文件【简单粗暴的解决方案】
这是在一个vue+springboot的小项目中遇到的问题,如图: 看了其他大佬的文章,看到了不少解决方案,但是无济于事,我这里依然报错,我一不做二不休直接提供一个是十分暴力的解决方案下面这个是两 ...
VUE中父子组件传参（简单明了）
· 父组件向子组件传递参数 child.vue如下 <template><div class="childClass"><h3>子组件内容< ...
vue中进度条写法_vue实现简单loading进度条
jq进度条 0% $(function () { var html = $('.meter'); var htmlW = $('.meter').val(); var styleW = parseIn ...
在vue中使用three.js创建一个简单的立体图形
安装 npm install three --save 使用页面直接引入import * as THREE from 'three' <template><div><d ...
【Vue】Vue基础知识点介绍（入门级，简单易懂）——day01
大家好,从今天开始,会每天分享vue学习的知识点,一起加油~ ①首先,牢记三个单词 bind绑定,property属性,mount挂载 1.Vue概述 1.1 特点尤雨溪创造,V2 与 V3流行 ...
vue实现密码显示隐藏、很简单易懂
效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制, ...
LeetCode:438. 找到字符串中所有字母异位词（简单易懂）
一.题目描述: 给定两个字符串 s 和 p,找到 s 中所有 p 的异位词的子串,返回这些子串的起始索引.不考虑答案输出的顺序. 异位词指由相同字母重排列形成的字符串(包括相同的字符串). 示例 ...

vue中向html插入节点标签（简单易懂）

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

简单几步：

1、创建新节点

2、将新节点替换要插入的标签（innerHTML方法）

3、将节点插入到页面指定的标签中（appendChild（）方法）

vue中向html插入节点标签（简单易懂）相关推荐

最新文章

热门文章