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>

运行效果

相关推荐
Never_Satisfied9 小时前
在JavaScript / HTML中,HTML元素自定义属性使用指南
开发语言·javascript·html
_OP_CHEN11 小时前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
CTO Plus技术服务中11 小时前
一栈式、系统性的C、C++、Go、网络安全、Linux运维开发笔记和面试笔记
c++·web安全·golang
♩♬♪.11 小时前
HTML学校官网静态页面
前端·css·html
modelmd11 小时前
Go、Java 的值类型和引用类型对比
java·golang
资深web全栈开发12 小时前
高并发的本质:超越语言的协作哲学——以 Go HTTP 服务器为例
服务器·http·golang·系统设计·goroutine·高并发架构·go并发
Never_Satisfied12 小时前
在JavaScript / HTML中,cloneNode()方法详细指南
开发语言·javascript·html
bing.shao12 小时前
Golang 在OPC领域的应用
开发语言·后端·golang
os_lee12 小时前
Milvus 实战教程(Go 版本 + Ollama bge-m3 向量模型)
数据库·golang·milvus
37方寸12 小时前
前端基础知识(HTML、CSS)
前端·css·html