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>

运行效果

相关推荐
触底反弹6 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
灯澜忆梦6 小时前
GO_并发编程---定时器
开发语言·后端·golang
qq_4523962315 小时前
第二篇:《Go 开发环境搭建:SDK、IDE、Module 与 Hello World》
开发语言·ide·golang
两点王爷16 小时前
一个快速加载面和多面数据的html测试页面(可以导出geojson数据文件)
前端·html·gis
FellAveal19 小时前
【Go语言入门学习笔记】Part13.结构体与接口
笔记·学习·golang
microrain19 小时前
从设备孤岛到智能协同:SagooIoT场景联动实战解析
物联网·golang·sagooiot
杨超越luckly1 天前
Agent应用指南:长三角41城跨城人口流动OD数据分析
python·数据挖掘·数据分析·html·可视化
灯澜忆梦1 天前
GO_网络编程---网络协议
网络·网络协议·golang
不好听6131 天前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
William.csj1 天前
BaiduPCS-Go——下载百度网盘文件的工具
golang·baidupc