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>
运行效果
