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>

运行效果

相关推荐
波格斯特3 小时前
Cobra CLI 工具使用指南:构建 Go 语言命令行应用的完整教程
开发语言·后端·golang
Stella25213 小时前
【HTML/CSS面经】
前端·css·html
CodePencil3 小时前
CSS专题之水平垂直居中
前端·css·html
Blue桃之夭夭15 小时前
HTML、XML、JSON 是什么?有什么区别?又是做什么的?
xml·html·json
ErizJ15 小时前
Golang | 运用分布式搜索引擎实现视频搜索业务
分布式·搜索引擎·golang·全栈·grpc
划水小将军16 小时前
睡眠分期 html
前端·javascript·html
CodePencil20 小时前
CSS专题之层叠上下文
前端·css·html
前端小趴菜051 天前
grid网格布局
前端·css·html
seraph9991 天前
pyecharts 画一下股票的月K图(输出html)
前端·python·html