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>

运行效果

相关推荐
茉莉玫瑰花茶4 小时前
GO [ 方法 ]
开发语言·后端·golang
数据库百宝箱6 小时前
rum&gin索引对比
java·数据库·gin
茉莉玫瑰花茶11 小时前
GO [ 函数 ]
开发语言·后端·golang
茉莉玫瑰花茶11 小时前
GO [ 类型 ]
开发语言·数据库·golang
茉莉玫瑰花茶12 小时前
GO [ 并发 ]
开发语言·后端·golang
蓝宝石的傻话13 小时前
onvif-go(mickeyzzc/onvif-go v2)完整参考手册:从建工程到写出自己的 NVR 接入
开发语言·后端·golang
用户2986985301416 小时前
在 React 中使用 JavaScript 将 HTML 转换为 PDF
javascript·react.js·html
茉莉玫瑰花茶16 小时前
GO [ 接口 ]
服务器·数据库·golang
吴声子夜歌16 小时前
HTML——结构化微数据语言简介
前端·数据库·html
吴声子夜歌17 小时前
HTML——Web Components开发
前端·html