简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

An example of using template engine in js (code)

不言
Release： 2018-08-13 16:21:51
Original
2377 people have browsed it

This article brings you an example (code) of using template engine in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. 

<!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>
Copy after login

Related recommendations:

Use js attributes to achieve the effect of horizontal drop-down menu in html5 (code)

multiparty implementation file in nodejs Uploaded code example

The above is the detailed content of An example of using template engine in js (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels：
template-web
source：php.cn
Previous article：Using js attributes to achieve the effect of horizontal drop-down menu in html5 (code) Next article：A brief introduction to the Object type in js
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Using variables defined in methods in templates This is my first time using Vue (v2 not v3) and I've been trying to use variables inside t...
From 2024-04-06 18:10:25
0
2
513
vue vee-validate captures the problem of date picker selection The v-model binding on my datepicker field is not working properly. When you make a select...
From 2024-04-06 11:38:56
0
1
510
Vite/Vue 3: "Undefined requirement" when using image source as prop I switched from VueCLI to ViteCLI, and from Vue3's CompositionAPI to SFCScriptsetupAPI. Ho...
From 2024-04-06 09:50:25
0
1
353
Why does a grid child with a fixed width and a max width of 90% overflow the grid track? Question: My question is very simple, I want to know why the .header element overflows its...
From 2024-04-05 14:33:39
0
1
1426
How to know when a Vue component is fully initialized? So, in my Vue component, I have an async created method and several variables with async w...
From 2024-04-05 14:20:24
0
1
1442
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！