arttemplate 模板语法

1.遍历表达式

<ul id="carList" class="list-unstyled">
    <script id="carListTmp" type="text/html">
      {{each nodes}}
        <li>
          <input type="checkbox" value="{{#$value.val}}" name="">
          {{$value.name}}
        </li>
      {{/each}}
    </script>
 </ul>

  

2.模板包含表达式

<ul id="carList" class="list-unstyled">
  <script id="carListTmp" type="text/html">
    <li>
      {{$value.name}}
      {{include ‘carListTmp2‘ $value.children}}
    </li>
  </script>
</ul>

  

3.条件表达式  

<script id="carListTmp3" type="text/html">
  <ul>
    {{if $value.color === "red"}}
       <i class="fa fa-circle-o text-red"></i>
       {{else if $value.color === "green"}}
       <i class="fa fa-circle-o text-green"></i>
       {{else}}
       <i class="fa fa-circle-o text-default"></i>
       {{/if}}
  </ul>
</script>

  

时间: 2024-11-03 17:25:26

arttemplate 模板语法的相关文章

artTemplate模板引擎学习实战

在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎.而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML. 如果有不了解的朋友,可以前往这两篇文章: 淘宝购物车页面 PC端和移动端实战 淘宝购物车页面 智能搜索框Ajax异步加载数据 源码地址: GitHub:Uncle-Keith 回

Node学习之(第三章:art-template模板引擎的使用)

前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的JavaScript 模板引擎,不仅可以在浏览器(前端)使用,同时也可以在Node中使用. GitHub地址:art-template 文档:官方中文 本章节我们来探讨下Node中使用art-template模板引擎生成一个标准的HTML文档. 主体 art-template原理就是将一个字符串数据按照模

Angular 2 模板语法与常用指令简介

一.模板语法简介 插值表达式 <div>Hello {{name}}</div> 等价于 <div [textContent]="interpolate(['Hello'], [name])"></div> 模板表达式 1.属性绑定 1.1输入属性的值为常量 <show-title title="Some Title"></show-title> 等价于 <show-title [titl

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

django之定义模板语法08({{ string | truncatewords:&#39;2&#39; }})

#index页面代码: <html> <head> <title>DOcument</title> </head> <body> <h1>{{user}}</h1> </br> </br> <h1>过滤器</h1> <p>{{ string | truncatewords:'2' }}</p> //显示前2个字(非字母) </body

vue 模板语法

模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以可以被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用系统改变时,Vue能够智能计算出重新渲染组件的最小代价并应用到DOM操作上. 插值 #文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: {{msg}} 通过使用v-once指令,你也能执

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上. 如果你熟悉虚拟DOM 并且偏爱JavaScript的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的JSX语法. 插值: 文本: 数据绑定最

Vue常用模板语法

常用模板语法 本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 1 <div class="row"> 2 <h2>文本 - 实时渲染</h2> 3 <input type="text" v-model="

angular2的模板语法

Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中,很多开发人员都熟悉了组件和模板这两个概念. 在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色. 来看看写视图的模板都需要什么.本章将覆盖模板语法中的下列基本元素 HTML 是 Angular 模板的语言.快速起步应用的模板是纯 HTML 的: <h1>Hello