vue动态生成html元素,Vue.js中的动态html元素
更新：
基于
this answer,您可以在Vue 2中执行类似的动态模板组件.您实际上可以在计算部分中设置组件规范并使用
:is绑定它
var v = new Vue({
el: '#vue',
data: {
message: 'hi #linky'
},
computed: {
dynamicComponent: function() {
return {
template: `
`,
methods: {
someAction() {
console.log("Action!");
}
}
}
}
},
methods: {
hashTags: function(value) {
// Replace hash tags with links
return value.replace(/#(\S*)/g, '#$1')
}
}
});
setTimeout(() => {
v.message = 'another #thing';
}, 2000);
内插HTML不会发生Vue绑定.你需要一些Vue看作模板的东西,比如a partial.但是,Vue只将绑定应用于部分一次;您无法返回并更改模板文本并重新绑定.因此,每次模板文本更改时,您都必须创建一个新的部分.
有一个您可以在HTML中添加标记/元素,并且它接受变量名称,因此过程为：
>模板HTML更改
>为新模板HTML注册新的部分名称
>更新名称变量,以便呈现新的部分
每次有变化时注册新内容都有点可怕,所以如果可能的话,最好使用具有更结构化模板的组件,但如果你真的需要带有绑定的完全动态HTML,它就可以工作.
下面的示例以一条消息开始,根据您的过滤器进行链接,并在两秒后更改消息.
您可以使用message作为部分名称进行注册,但是您需要一个在执行注册后返回该名称的computed,否则它将尝试在注册名称之前呈现.
var v = new Vue({
el: 'body',
data: {
message: 'hi #linky'
},
computed: {
partialName: function() {
Vue.partial(this.message, this.hashTags(this.message));
return this.message;
}
},
methods: {
someAction: function() {
console.log('Action!');
},
hashTags: function(value) {
// Replace hash tags with links
return value.replace(/#(\S*)/g, '#$1')
}
}
});
setTimeout(() => {
v.$set('message', 'another #thing');
}, 2000);
vue动态生成html元素,Vue.js中的动态html元素相关推荐
- js删除指定html及子标签,js中如何删除某个元素下面的所有子元素？（两种方法）...
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- python3动态生成变量_【转载】 Python动态生成变量
用Python循环创建多个变量, 如创建 a1= .a2= .a3= .a4= .a5= 或 self.a1= .self.a2= . self.a3= 一. 可以通 ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
- 动态生成的html元素无法调用js函数,如何确保动态生成的div在js函数被调用之前被加载到DOM中？...
$("#submitB").click(function() { $.post("/previewproposal", $("#proposal-fo ...
- js 中添加php数组元素,JS数组添加元素方法总结
本篇文章介绍了如何向JS数组中添加新的元素,分别使用不同的几种方法去给JS数组添加元素,数组在JS中是很常用的数据类型之一,而对数组进行操作这是我们必会的基础之一. 下面我们来看一下有哪些方法可以对J ...
- js中的块级元素和行级元素
块级元素和行内元素的定义 块级元素 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度. 它可以容纳内联元素和其他块元素 行内元素 和其他元素都 ...
- js中怎么删除html元素的属性,如何使用JavaScript删除HTML元素？
给定一个HTML元素,如何使用JavaScript从文档中删除该HTML元素?下面本篇文章就来给大家介绍一下使用JavaScript删除HTML元素的方法,希望对大家有所帮助. 如何使用JavaScr ...
- org.apache.poi Excel列与行都是动态生成的_网络爬虫：Python动态网页爬虫2种技术方式及示例...
作者:糖甜甜甜 https://mp.weixin.qq.com/s/5Dwh5cbfjpDfm_FRcpw1Ug 这一讲,我将会为大家讲解稍微复杂一点的爬虫,即动态网页的爬虫. 动态网页技术介绍 动 ...
最新文章
- 双链表的创建，求长，插入，删除，打印，释放（循环和非循环）
- 秀一秀我的微软MVP（最有价值专家）的大礼包和水晶奖杯！
- Gradle属性（四）
- python循环输出三角形图案的画_python循环输出三角形图案的例子
- 以系统化视角反观产品运营，解读提升用户转化的“四部曲”
- 虚拟桌面的备份恢复最佳实践 第二部分
- uva live 2326 - Moving Tables
- 【卷积神经网络】ResNet翻译详解
- leetcode-reverse words in a string
- 5 video关掉字幕选项_让PPT字幕滚动起来，一秒高端大气，赶紧码住！
- Python+OpenCV：基于色彩空间转换的目标跟踪
- java创建实体 内存_加载Java实体时内存不足
- 云原生 - 阿里云 SLB、CDN、SCDN、DCDN 区别在哪？如何选择？
- 计算机怎么更改网络密码,该如何修改自家宽带帐号的密码？
- 【D-S证据理论】学习笔记
- 关于磁力计和加速度计的融合以及坐标系的对准
- 超图iServer rest服务之最佳路径分析
- Struts2快速入门,超简单详细的快速入门教程
- idea-插件开发 Dialogs
- 第七章 微分方程（一）