如何利用Vue.js库中的v-html指令添加html元素
5个回答
展开全部
1、新建html文档，然后在head标签中引入vue的js文件，这里以引入cdn文件为例：
2、在body标签中添加一个id为“app”的div标签，然后在这个div标签中再添加一个div标签，在vue中添加一个变量数据，然后用“{{}}”符号将变量引入到div标签中，并且在标签中添加“v-html="变量"v-html="变量"”属性：
3、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂</title>
<link rel="stylesheet" type="text/css" href="reset-1.0.0.css" />
</head>
<body>
<div class="wrap" id="app">
<button @click.prevent="addNodesFn">点击我呀</button>
<div v-html="rawHtml"></div>
</div>
<script src="vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
rawHtml: '\
<div>\
<h2>HTML5学堂</h2>\
<p>码匠</p>\
</div>\
'
},
methods: {
addNodesFn: function() {
this.rawHtml += this.rawHtml;
}
}
});
</script>
</body>
</html>
这是一个完整的例子。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一步，创建静态页面vhtml.html，并引入vue.js文件，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第二步，在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第三步，绑定v-html指令数据，这里设置为字符串，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
6
第六步，将调试打开，这时发现<div></div>中有个<p></p>标签，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
如何利用Vue.js库中的v-html指令添加html元素
第二步，在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第三步，绑定v-html指令数据，这里设置为字符串，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
6
第六步，将调试打开，这时发现<div></div>中有个<p></p>标签，如下图所示：
如何利用Vue.js库中的v-html指令添加html元素
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js在特定位置动态添加html可以利用HTML DOM appendChild() 方法。
例子：
var div1 = document.createElement("div");
div1.id = "div1";
var div2 = document.createElement("div");
div2.id ="div2";
document.body.appendChild(div1);
div1.appendChild(div2);
appendChild()定义和用法：
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
从一个列表向另一个列表中移动列表项：
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
例子：
var div1 = document.createElement("div");
div1.id = "div1";
var div2 = document.createElement("div");
div2.id ="div2";
document.body.appendChild(div1);
div1.appendChild(div2);
appendChild()定义和用法：
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
从一个列表向另一个列表中移动列表项：
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2018-07-26 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
第一步，创建静态页面vhtml.html，并引入vue.js文件
第二步，在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令第三步，绑定v-html指令数据，这里设置为字符串
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”
第六步，将调试打开，这时发现<div></div>中有个<p></p>标签
第二步，在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令第三步，绑定v-html指令数据，这里设置为字符串
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”
第六步，将调试打开，这时发现<div></div>中有个<p></p>标签
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
