Vue之小知识点(标签中嵌套模板)

最新推荐文章于 2023-06-16 15:24:08 发布

orangeVege

最新推荐文章于 2023-06-16 15:24:08 发布

阅读量1.3k

点赞数

分类专栏： Web前端设计文章标签： Vue之小知识点

本文链接：https://blog.csdn.net/cfyfcyf/article/details/90519304

版权

Web前端设计专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue之模板的使用小知识点：

解决方案之模板在table和ul中使用的小知识点：

解析：

在table表格中使用模板，名字为定义的模板名称，在页面上会显示在table外，解决方案，将模板名称改为tr(table中的组件),可以使用tr标签中加is="模板名称"。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<tr is="row"></tr>
				</tbody>
			</table>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script type="text/javascript">
			Vue.component("row",{
				data(){
					return{
						content:"this is template"
					}	
				},
				template:"<tr><td>{{content}}</td></tr>"
			})
			var app=new Vue({
				el:"#app",
				data:{
					<!-- content:""; -->
				}
			});
		</script>
		
	</body>
</html>