beetl for循环渲染html字符串的方式,

beetl if条件判断输出,

beet自定义标签和标签引用,

beetl html赋值,

beetl渲染json,beetl注释、变量定义,

更多文档请到:http://ibeetl.com/guide/#beetl

beetl for循环输出
beetl for输出select option
<select>
@for(item in list){
<option value="${item.id}">${item}</option>
@}
</select> beetl for输出ul li html <ul>
@for(item in list){
<li>${item}</li>
@}
</ul>

  

beetl定界符和占位符 

  1. @ 和回车换行
  2. #: 和回车换行
  3. <!--: 和 -->
  4. <!--# 和 -->
  5. <? 和 ?>
  6. 占位符--#{ }-##

定界符号里是表达式,如果表达式跟定界符或者占位符有冲突,可以在用 “\” 符号,如

@for(user in users){
email is ${user.name}\@163.com
@}
${[1,2,3]} //输出一个json列表
${ {key:1,value:2 \} } //输出一个json map,} 需要加上\

  

beetl注释

Beetl语法类似js语法,所以注释上也同js一样: 单行注释采用//  多行注视采用/* */

<%
/*此处是一个定义变量*/
var a = 3; //定义一个变量. /* 以下内容都将被注释
%>
<% */ %>

  

beetl赋值

赋值于html中常用 ${ 服务端的变量 } 来做,这个于jsp是一致的。例如:

<input value="${value}">
<div>${html}</div>

  

beetl if选择性输出变量格式化

支持三元表达式

${a==1?"ok":''}
${a==1?"ok"} <input type="checkbox" ${a==0? "checked"}> <input ${a==0?"readonly"} /> <select>
<option ${a==1?"selected"}>hello</option>
<option>world</option>
</select>

  

beetl标签函数

 如果共用一个模版html

方法一:
<%
layout("/temlet/layout.html"){
%>
//这里可以写上html
<% } %> 方法二:
@layout("/temlet/layout.html"){
//这里可以写上html
@}

  

允许 include 另外一个模板文件

<%
include("/inc/header.html"){}
%>

  

自定义HTML标签

<#button name="提交" handle="add()"/>

file: /* button.tag */

<button onclick="${handle}">${name}</button>

 

beetl模版for循环渲染字符串的更多相关文章

  1. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  2. Vue 中渲染字符串形式的组件标签

    在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...

  3. vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

    一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...

  4. Vue如何循环渲染图片

    Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...

  5. Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面

    Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面 在<Spring Boot(一):快速开始>中介绍了如何使用 Spring Boot 构建一个工程,并且提 ...

  6. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  7. Python基础->for循环、字符串以及元组

    python流程控制>for循环.字符串以及元组 学习有关序列的思想.序列:一组有顺序的东西.所有的序列都是由元素组成的,序列中的元素位置是从0开始编号的,最后一个元素的位置是它长度减一. fo ...

  8. Flutter中通过循环渲染组件

    class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...

  9. vue3——vue数据循环渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. xadmin引入django-debug-toolbar调试工具

    一.安装: pip install django-debug-toolbar 安装django-debug-toolbar库 https://github.com/jazzband/django-de ...

  2. java内部类的本质

    连接与通信,作为桥接中间件存在. 内部类和主体类可以无障碍通信: 1.通过继承连接实现: 2.通过接口连接通信: 形式: 1.命名空间: 2.运行上下文: 其它: 信息隐藏是次要功能. 内部类 Jav ...

  3. python--面向对象编程之学生选课系统练习

    1.系统目录结构 文件夹注解: bin--系统管理员和学生的主程序代码 config--系统的配置文件 db--系统的数据文件 admin--管理员的数据文件 student--学生的数据文件 lib ...

  4. Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分

    var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true ...

  5. MongoDB 几种查询嵌套数据(Embedded)的方式(转载)

    前言 MongoDB 推荐使用「内嵌文档(Embedded)」,所以带来一个问题,如何查询嵌入文档内的数据? 假如我们有一个 storage 的 Collection,包含一条数据: // `stor ...

  6. vcenter监控

    在vcenter上配置好用户名密码和url即可使用自动发现自动发现vmware

  7. 服务器使用ssh秘钥登录并禁止密码登录

    问题: 最近在登录服务器的时候,每次都会有提示999+ falied login等字眼,意思就是自己的服务器密码正在被人暴力破解.想象以下,别人有了你的服务器的root登录密码,那么就可以对你的服务器 ...

  8. http 缓存机制简介

    我们应该从两个角度来看http的缓存:缓存控制 和 缓存校验.缓存控制:控制缓存的开关,用于标识请求或访问中是否开启了缓存,使用了什么样的存方式.缓存校验:如何校验缓存,缓存的有效期,如何确定缓存是最 ...

  9. 无法导入cv2模块(Python 3.6)

    C:\Users\leahj>C:\Users\leahj\AppData\Local\Programs\Python\Python36\Scripts\pip3 install cv2 Col ...

  10. Linux 查看文件权限命令ls -l 输出信息每列所代表的含义