简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

js에서 템플릿 엔진을 사용하는 예(코드)

不言
풀어 주다： 2018-08-13 16:21:51
원래의
2383명이 탐색했습니다.

이 기사는 js에서 템플릿 엔진을 사용하는 예제(코드)를 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다. 

<!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>
로그인 후 복사

관련 권장 사항:

js 속성을 사용하여 HTML5에서 가로 드롭다운 메뉴 효과 얻기(코드)

nodejs에서 파일 업로드를 구현하는 다자간 코드 예제

위 내용은 js에서 템플릿 엔진을 사용하는 예(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
template-web
원천：php.cn
이전 기사：js 속성을 사용하여 html5(코드)에서 가로 드롭다운 메뉴 효과 얻기 다음 기사：js의 객체 유형에 대한 간략한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
Vite/Vue 3: 이미지 소스를 소품으로 사용할 때 "정의되지 않은 요구 사항" VueCLI에서 ViteCLI로, Vue3의 CompositionAPI에서 SFCScriptsetupAPI로 전환했습니다. 이전에 어떻게 작동했는지 공식 VueC...
에서 2024-04-06 09:50:25
0
1
353
너비가 고정되고 최대 너비가 90%인 그리드 하위 항목이 그리드 트랙을 오버플로하는 이유는 무엇입니까? 질문: 제 질문은 매우 간단합니다. .header 요소가 뷰포트 너비 1500픽셀에 도달할 때 그리드 트랙을 오버플로하는 이유를 알고 싶습니다. 코드: *{box...
에서 2024-04-05 14:33:39
0
1
1426
Vue 구성 요소가 완전히 초기화되었는지 어떻게 알 수 있나요? 따라서 내 Vue 구성 요소에는 비동기 생성 메서드와 비동기 감시자가 있는 여러 변수가 있습니다. 이러한 변수는 일부 구성 요소의 템플릿 섹션에 있는 요소에 의해...
에서 2024-04-05 14:20:24
0
1
1442
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！