Tabla de contenido
1. ¿Qué es un motor de plantillas?
2. Cómo convertir los datos en vista:
2. Método de unión de datos ():
3. Método anti-arranque de ES6:
4. Bigote de motor de plantilla:
(1) Matriz de objetos de bucle:
(3) No repita la matriz de objetos:
(4) Haga un bucle de una matriz simple:
1. ¿Qué es un motor de plantillas?
El motor de plantillas es la solución más elegante para convertir datos en vistas .
2. Cómo convertir los datos en vista:
1. Método DOM puro
Cree (document.createElement ("")) etiquetas diferentes a través de JS nativo y agregue las etiquetas del elemento secundario (appendChild ()) al contenido del elemento principal.
<ul id="list">
</ul>
<script>
var arr = [
{ "name": "小明", "age": 12, "sex": "男" },
{ "name": "小红", "age": 11, "sex": "女" },
{ "name": "小强", "age": 13, "sex": "男" }
];
var list = document.getElementById('list');
for (var i = 0; i < arr.length; i++) {
// 每遍历一项，都要用DOM方法去创建li标签
let oLi = document.createElement('li');
// 创建hd这个div
let hdDiv = document.createElement('div');
hdDiv.className = 'hd';
hdDiv.innerText = arr[i].name + '的基本信息';
// 创建bd这个div
let bdDiv = document.createElement('div');
bdDiv.className = 'bd';
// 创建三个p
let p1 = document.createElement('p');
p1.innerText = '姓名：' + arr[i].name;
bdDiv.appendChild(p1);
let p2 = document.createElement('p');
p2.innerText = '年龄：' + arr[i].age;
bdDiv.appendChild(p2);
let p3 = document.createElement('p');
p3.innerText = '性别：' + arr[i].sex;
bdDiv.appendChild(p3);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
oLi.appendChild(hdDiv);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
oLi.appendChild(bdDiv);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
list.appendChild(oLi);
}
</script>2. Método de unión de datos ():
El método join () se usa para poner todos los elementos de la matriz en una cadena, y los elementos están separados por el separador especificado.
<ul id="list"></ul>
<script>
var arr = [
{ "name": "小明", "age": 12, "sex": "男" },
{ "name": "小红", "age": 11, "sex": "女" },
{ "name": "小强", "age": 13, "sex": "男" }
];
var list = document.getElementById('list');
// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
for (let i = 0; i < arr.length; i++) {
list.innerHTML += [
'<li>',
' <div class="hd">' + arr[i].name + '的信息</div>',
' <div class="bd">',
' <p>姓名：' + arr[i].name + '</p>',
' <p>年龄：' + arr[i].age + '</p>',
' <p>性别：' + arr[i].sex + '</p>',
' </div>',
'</li>'
].join('')
}
</script>3. Método anti-arranque de ES6:
Utilice `` para empalmar cadenas y obtenga el valor del elemento mediante $ {arr [i] .name}.
<ul id="list"></ul>
<script>
var arr = [
{ "name": "小明", "age": 12, "sex": "男" },
{ "name": "小红", "age": 11, "sex": "女" },
{ "name": "小强", "age": 13, "sex": "男" }
];
var list = document.getElementById('list');
// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
for (let i = 0; i < arr.length; i++) {
list.innerHTML += `
<li>
<div class="hd">${arr[i].name}的基本信息</div>
<div class="bd">
<p>姓名：${arr[i].name}</p>
<p>性别：${arr[i].sex}</p>
<p>年龄：${arr[i].age}</p>
</div>
</li>
`;
}
</script>
4. Bigote de motor de plantilla:
Su etiqueta de incrustación es "{ {}}", que también es la sintaxis utilizada por Vue. Primero debes descargar mustache.js . Aquí vamos a BootCDN y lo descargamos para referencia directa.
Utilice el método Moustache.render (templateStr, data). templateStr: cadena de plantilla, datos de datos.
(1) Matriz de objetos de bucle:
<div id="container">
<ul>
<li>
<div class="hd">小明的基本信息</div>
<div class="bd">
<p>姓名：小明</p>
<p>年龄：12</p>
<p>性别：男</p>
</div>
</li>
<li>
<div class="hd">小红的基本信息</div>
<div class="bd">
<p>姓名：小红</p>
<p>年龄：11</p>
<p>性别：女</p>
</div>
</li>
<li>
<div class="hd">小强的基本信息</div>
<div class="bd">
<p>姓名：小强</p>
<p>年龄：13</p>
<p>性别：男</p>
</div>
</li>
</ul>
</div>
</body>
<script src="../js/mustache.js"></script>
<script>
var templateStr = `
<ul>
{
{#arr}}
<li>
<div class="hd">{
{name}}的基本信息</div>
<div class="bd">
<p>姓名：{
{name}}</p>
<p>性别：{
{sex}}</p>
<p>年龄：{
{age}}</p>
</div>
</li>
{
{/arr}}
</ul>
`;
var data = {
arr: [{
"name": "小明",
"age": 12,
"sex": "男"
},
{
"name": "小红",
"age": 11,
"sex": "女"
},
{
"name": "小强",
"age": 13,
"sex": "男"
},
]
};
var domStr = Mustache.render(templateStr, data);
var dom = document.getElementById("container");
dom.innerHTML = domStr;
console.log(domStr);
</script>
(2) Anidación de matrices:
<div id="container">
</div>
</body>
<script src="../js/mustache.js"></script>
<script>
var templateStr = `
<ul>
{
{#arr}}
<li>{
{name}}的爱好是：
<ol>{
{#hobbies}}
<li>{
{.}}</li>
{
{/hobbies}}
</ol>
</li>
{
{/arr}}
</ul>
`;
var data = {
arr:[
{"name":"小明","age":12,"hobbies":["游泳","羽毛球"]},
{"name":"小红","age":11,"hobbies":["编程","弹钢琴"]},
{"name":"小强","age":13,"hobbies":["游泳","羽毛球"]}
]
};
var domStr = Mustache.render(templateStr,data);
var dom = document.getElementById("container");
dom.innerHTML = domStr;
console.log(domStr);
</script>
(3) No repita la matriz de objetos:
<div id="container">
</div>
</body>
<script src="../js/mustache.js"></script>
<script>
var templateStr = `
<h1>我买了一个{
{thing}},好{
{mood}}啊！</h1>
`;
var data = {
thing:"华为手机",
mood:"心情"
};
var domStr = Mustache.render(templateStr,data);
var dom = document.getElementById("container");
dom.innerHTML = domStr;
console.log(domStr);
</script>
(4) Haga un bucle de una matriz simple:
<div id="container">
</div>
</body>
<script src="../js/mustache.js"></script>
<script>
var templateStr = `
<ul>
{
{#arr}}
<li>{
{.}}</li>
{
{/arr}}
</ul>
`;
var data = {
arr:["A","B","C"]
};
var domStr = Mustache.render(templateStr,data);
var dom = document.getElementById("container");
dom.innerHTML = domStr;
console.log(domStr);
</script>
(5) Valor booleano:
El verdadero y falso de m en los datos puede controlar la visualización del contenido del texto.
<div id="container">
</div>
</body>
<script src="../js/mustache.js"></script>
<script>
var templateStr = `
{
{#m}}
<h1>您好</h1>
{
{/m}}
`;
var data = {
m:true
};
var domStr = Mustache.render(templateStr,data);
var dom = document.getElementById("container");
dom.innerHTML = domStr;
console.log(domStr);
</script>
Nota: Para obtener información, consulte "Cursos de análisis de código fuente de Silicon Valley Vue" .