Getting Started – Pug https://pugjs.org/api/getting-started.html

GitHub - Tencent/wepy: 小程序组件化开发框架 https://github.com/Tencent/wepy

<template lang="pug">
view(class='container')
view(class='userinfo' @tap='tap')
mycom(:prop.sync='myprop' @fn.user='myevent')
text {{now}}
</template> 多会企业版 - 专属线下活动平台 https://www.duohui.cn/enterprise#features Attributes – Pug https://pugjs.org/language/attributes.html

Here are some alternatives you can use to include variables in your attribute:

  1. Simply write the attribute in JavaScript:

     
    - var url = 'pug-test.html';
    a(href='/' + url) Link
    |
    |
    - url = 'https://example.com/'
    a(href=url) Another link
     
     
    <a href="/pug-test.html">Link</a>
    <a href="https://example.com/">Another link</a>
     
  2. If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:

     
    - var btnType = 'info'
    - var btnSize = 'lg'
    button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
    |
    |
    button(type='button' class=`btn btn-${btnType} bt
    

    Style Attributes

    The style attribute can be a string, like any normal attribute; but it can also be an object, which is handy when styles are generated by JavaScript.

     
    a(style={color: 'red', background: 'green'})
     
    <a style="color:red;background:green;"></a>
     

pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument.的更多相关文章

  1. How to compile and install Snort from source code on Ubuntu

    http://www.tuicool.com/articles/v6j2Ab Snort is by far the most popular open-source network intrusio ...

  2. XML.ObjTree -- XML source code from/to JavaScript object like E4X

    转载于:http://www.kawa.net/works/js/xml/objtree-try-e.html // ========================================= ...

  3. How to Build MySQL from Source Code on Windows & compile MySQL on win7+vs2010

    Not counting obtaining the source code, and once you have the prerequisites satisfied, [Windows] use ...

  4. How to compile and install Linux Kernel 5.1.2 from source code

    How to compile and install Linux Kernel 5.1.2 from source code Compiling a custom kernel has its adv ...

  5. Indenting source code

    Artistic Style 1.15.3 A Free , Fast and Small Automatic Formatterfor C , C++ , C# , Java Source Code ...

  6. [转]Native Java Bytecode Debugging without Source Code

    link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

  7. UI5 Source code map机制的细节介绍

    在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题,最后结论是这个问题由于Jav ...

  8. Tips for newbie to read source code

    This post is first posted on my WeChat public account: GeekArtT Reading source code is always one bi ...

  9. 编程等宽字体Source Code Pro(转)

    Source Code Pro - 最佳的免费编程字体之一!来自 Adobe 公司的开源等宽字体下载     每一位程序员都有一套自己喜爱的代码编辑器与编程字体,譬如我们之前就推荐过一款"神 ...

随机推荐

  1. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  2. springboot admin server常用配置

    Property name Description Default value spring.boot.admin.context-path The context-path prefixes the ...

  3. makefile之origin函数

    origin 函数的作用是告诉你变量是哪里来的,其出生状况如何,他并不改变变量. 函数语法: $(origin ) 为变量的名字,而不是引用,所以一般没有"$"字符在前. orig ...

  4. RCU

    RCU(read-copy-update)同步机制.R(Read):读者不需要获得任何锁就可访问RCU保护的临界区:C(Copy):写者在访问临界区时,写者“自己”将先拷贝一个临界区副本,然后对副本进 ...

  5. Linux命令之rename

    一.引言 今天才知道Linux下的rename有两个版本,util-linux工具集的rename和Perl版本的rename,而两者的用法是明显不一样的,Perl版rename相对比较强大 二.对比 ...

  6. 读CLR via C#笔记

    1.is 和 as 的区别 public class Employee { } a): object obj = new Employee(); if (obj is Employee) { Empl ...

  7. Ream的入门使用

    一.介绍 Realm是一个不错的手机平台上的数据库,支持多种编程环境,如:Java.Object-C.React Native.Swift.Xamari等. Realm的官网:https://real ...

  8. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

  9. QBC运算符含义

    HQL运算符                   QBC运算符                      含义      =                     Restrictions.eq() ...

  10. City Destruction Kattis - city dp

    /** 题目:City Destruction Kattis - city 链接:https://vjudge.net/problem/Kattis-city 题意:有n个怪兽,排成一行.每个怪兽有一 ...