golang gin template模板渲染

1、根据值控制html元素显示隐藏

main.go

复制代码
package main
import (
    "html/template"
    "net/http"
    "github.com/gin-gonic/gin"
)
func main() {
    r := gin.Default()
    r.SetFuncMap(template.FuncMap{
        "greaterThan": func(a, b int) bool {
            return a > b
        },
    })
    r.LoadHTMLGlob("templates/*")
    r.GET("/", func(c *gin.Context) {
        value := 10 // 示例值
        c.HTML(http.StatusOK, "index.html", gin.H{
            "Value": value,
        })
    })
    r.Run()
}

index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    {{ if greaterThan .Value 5 }}
        <div>Value is greater than 5</div>
    {{ end }}
</body>
</html>

在 Go 的 Gin 框架中,可以使用条件语句在 HTML 模板中控制元素的渲染。假设你有一个变量 `value`,你想根据它的值来决定是否渲染某个 HTML 元素,可以这样做:

这段代码会在 `value` 大于 5 时显示指定的 `<div>` 元素。否则,该元素将不会被渲染。

显示结果

2、循环遍历列表生成html元素

main.go

复制代码
package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

type ListArr struct {
	Name string
	Age  int
}

func main() {
	r := gin.Default()
	l := [3]ListArr{
		{Name: "bob", Age: 20},
		{Name: "jack", Age: 30},
		{Name: "alice", Age: 32},
	}
	r.LoadHTMLGlob("templates/*")
	r.GET("/", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", gin.H{
			"List": l,
		})
	})
	r.Run(":9999")
}

templates/index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    {{range .List}}
        <p>my name is {{.Name}} my age is {{.Age}}</p>
    {{end}}
</body>
</html>

运行效果

3、一和二结合使用

main.go

复制代码
package main

import (
	"github.com/gin-gonic/gin"
	"html/template"
	"net/http"
)

type ListArr struct {
	Name string
	Age  int
}

func main() {
	r := gin.Default()
	r.SetFuncMap(template.FuncMap{
		"greaterThan": func(a, b int) bool {
			return a > b
		},
	})
	l := [3]ListArr{
		{Name: "bob", Age: 20},
		{Name: "jack", Age: 30},
		{Name: "alice", Age: 32},
	}
	r.LoadHTMLGlob("templates/*")
	r.GET("/", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", gin.H{
			"List": l,
		})
	})
	r.Run(":9999")
}

templates/index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    {{range .List}}
        {{ if greaterThan .Age 25 }}
            <p>my name is {{.Name}} my age is {{.Age}} 年龄超过了25岁</p>
        {{ else }}
            <p>my name is {{.Name}} my age is {{.Age}} 年龄没有25岁</p>
        {{ end }}
    {{end}}
</body>
</html>

运行效果

相关推荐
apocelipes11 小时前
常用编程语言和库的正则表达式性能对比
c语言·c++·python·性能优化·golang·开发工具和环境
ZhengEnCi7 天前
Q02-Vue-React-index.html完全指南
vue.js·react.js·html
牧艺8 天前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
爱勇宝8 天前
我给自己做了一个新标签页:不登录、不打扰、打开就能用
前端·html·浏览器
越努力越幸运669 天前
多模态代码调试实战:Gemini3.5 精准捕获 HTML 隐性语法
html
anOnion12 天前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
米丘13 天前
微前端之 Web Components 完全指南
微服务·html
何以解忧,唯有..16 天前
Go语言循环语句详解:for、range与循环控制
开发语言·算法·golang
Metaphor69216 天前
使用 Python 将 PDF 转换为 HTML
python·pdf·html
踏着七彩祥云的小丑16 天前
Go学习第9天:并发编程 + 文件操作 + 正则表达式
学习·golang·正则表达式·go