简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

js中使用template模板引擎实现的一个例子（代码）

不言
发布： 2018-08-13 16:21:51
原创
2382 人浏览过

本篇文章给大家带来的内容是关于js中使用template模板引擎实现的一个例子（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="template-web.js"></script>
</head>
<body>
<p id="content"></p>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
 {{each list as value i}}
  <li>索引 {{i + 1}} ：{{value}}</li>
 {{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
 title: &#39;基本例子&#39;,
 isAdmin: true,
 list: [&#39;文艺&#39;, &#39;博客&#39;, &#39;摄影&#39;, &#39;电影&#39;, &#39;民谣&#39;, &#39;旅行&#39;, &#39;吉他&#39;]
};
var html = template(&#39;test&#39;, data);
document.getElementById(&#39;content&#39;).innerHTML = html;
</script>
</body>
</html>
登录后复制

相关推荐： 

html5中利用js属性实现水平下拉菜单的效果（代码）

nodejs中multiparty实现文件上传的代码示例

以上是js中使用template模板引擎实现的一个例子（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
template-web
来源：php.cn
上一篇：html5中利用js属性实现水平下拉菜单的效果（代码） 下一篇：js中Object类型的简单介绍
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在模板中使用在方法中定义的变量 这是我第一次使用Vue（v2而不是v3），并且我一直在尝试在模板内使用变量（在方法内定义）。我的简化代码：<template><divclass="co...
来自于 2024-04-06 18:10:25
0
2
513
vue vee-validate 捕获日期选择器选择的问题 我的日期选择器字段上的v-model绑定无法正常工作。当您做出选择时，它将在屏幕上实时更新，但它不会将值存储在formValues反应对象中。由于vee-validate不支持日期...
来自于 2024-04-06 11:38:56
0
1
510
Vite / Vue 3：使用图像源作为道具时'未定义要求” 我从VueCLI切换到ViteCLI，从Vue3的CompositionAPI切换到SFCScriptsetupAPI。它以前对我来说是如何工作的当我使用官方VueCLI时，我可以...
来自于 2024-04-06 09:50:25
0
1
353
为什么具有固定宽度和最大宽度为90%的网格子项会溢出网格轨道？ 问题：我的问题非常简单，我想知道为什么.header元素在达到1500像素的视口宽度时会溢出其网格轨道。代码：*{box-sizing:border-box;padding:0;m...
来自于 2024-04-05 14:33:39
0
1
1426
如何知道Vue组件何时完全初始化完成？ 所以，在我的Vue组件中，有一个异步的created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model。watcher调用其他...
来自于 2024-04-05 14:20:24
0
1
1442
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！