vue中数据的渲染采用的是mustache语法

落日映苍穹つ 2021-07-25 16:40 433阅读 0赞

# js模板引擎mustache #

在Javascript中 mustache.js是实现mustache模板系统。

Mustache是一种没有逻辑的模板语法。它可以应用于HTML、配置文件、源代码等任何地方。 它通过使用散列或对象中提供的值在模板中展开标记来工作。

我们称它为没有逻辑的模板，是因为它没有if语句、else子句和for循环，它只有标签。一些标签被替换为值或什么也没有或者一系列的值。

不能在模板中使用else if做逻辑判断，我们可以在数据传入之前对数据做逻辑操作。

我们在那使用mustache.js

你可以在任何可以使用JavaScript的地方使用mustache.js来渲染mustache模板。包括web浏览器、服务器环境（node）。  
语法

模板以包裹住内容，格式中写入的是模板的内容。 被替换的内容字段使用双花括号包裹起来"\{ \{\}\}"  
插值表达式：双花括号\{ \{\}\} 包裹替换的字段  
\{ \{\#prop-name\}\}\{ \{/prop-name\}\}用作for循环渲染，当prop-name的值为非空数组时，mustach不会遍历该数组，渲染出个数和该数组长度相等的DOM元素  
也可以用作if-else判断。\{ \{\#prop-name\}\}\{ \{/prop-name\}\}和\{ \{prop-name\}\}\{ \{/prop-name\}\}两组标签结合使用，当prop-name的值存在且不为false时，会渲染\{ \{\#prop-name\}\}\{ \{/prop-name\}\}的内容，否则渲染\{ \{prop-name\}\}\{ \{/prop-name\}\}的内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/f17069b1848b453d8a4e7c0fd709bca4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，433人围观）

还没有评论，来说两句吧...

相关阅读

相关 mustache语法

ustache 的模板语法很简单，就那么几个： ? <table> <tbody> <tr> <td> <div> 1 ...

小鱼儿/ 2024年04月18日 18:06/ 0 赞/ 56 阅读

相关 Vue｜数据渲染

![968f4c3a9001403aaa609f4e85ac2933.gif][] > Vue 是如何将编译器中的代码转换为页面真实元素的？在Vue 中,自带了模板渲染,而模

红太狼/ 2023年09月25日 18:06/ 0 赞/ 44 阅读

相关 Vue数据渲染

Vue数据渲染如何渲染渲染的语法：\{ \{…要渲染的内容\}\} —— 需要用两个花括号括起来要渲染的数据必须是 this 作用域可访问到的.

我就是我/ 2023年07月11日 12:34/ 0 赞/ 92 阅读

相关 vue核心面试题（为什么vue采用异步渲染）

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vu

亦凉/ 2023年02月20日 13:45/ 0 赞/ 235 阅读

相关 vue 数据渲染

`{ {}}`在html中渲染,里面可以写代码,直接引用vue中的内容 <body> <div id="app"> <div>

小咪咪/ 2023年01月07日 07:21/ 0 赞/ 115 阅读

相关 Mustache语法中实现if-else

1、\{ \{\prop\}\}\{ \{/prop\}\}标签：这对标签的作用非常强大，可以同时完成if-else和for-each以及动态渲染的模板功能。在这对标签之

小咪咪/ 2022年11月26日 06:53/ 0 赞/ 235 阅读

相关为何Vue采用异步渲染?

故心故心故心故心小故冲啊 -------------------- 文章目录为何Vue采用异步渲染? -------------------- 为何

曾经终败给现在/ 2022年10月31日 04:10/ 0 赞/ 160 阅读

相关 Vue中mustache的探秘

什么是模板引擎，平时使用Vue写循环的时候用v-for那么溜却从来没有想过为什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

逃离我推掉我的手/ 2022年10月26日 01:29/ 0 赞/ 182 阅读

相关 vue数据渲染

在webpack.dev.conf.js里它后面const portfinder = require('portfinder'),加入 const express =

小咪咪/ 2022年05月09日 07:44/ 0 赞/ 218 阅读

相关 vue中数据的渲染采用的是mustache语法

js模板引擎mustache 在Javascript中 mustache.js是实现mustache模板系统。 Mustache是一种没有逻辑的模板语法。它可以应用于H

落日映苍穹つ/ 2021年07月25日 16:40/ 0 赞/ 434 阅读