如何在 Google AMP 中使用 amp-bind 动态更改/更新图像？

有时，您希望向 AMP 页面添加自定义交互性，以使您的页面看起来更加用户友好和用户调用。虽然 AMP 的预建组件有限，所以 amp-bind 就是为了克服这个问题。它可以帮助开发人员在不使用 AMP 预构建组件的情况下向页面添加自定义交互性。您可以使用 amp-bind 在用户与页面交互时动态更改文本。

设置：要在您的页面中使用 amp-bind，您必须在文档的标题中导入其脚本。

Google AMP 的 amp-bind 包含三个主要概念：

1. 状态：状态变量负责根据用户操作在页面上进行更新。定义状态变量非常重要。
2. 表达式：它们就像用于引用状态的 JavaScript 表达式。
3. 绑定：它们是一种特殊的属性，用于通过表达式将元素的属性链接到状态。

例子：

HTML

 

    
    Google AMP amp-bind
 
    
 
    
 
    
    
 
    
    
 
    
        body {
            -webkit-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            -moz-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            -ms-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
        }
 
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
    
 
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
 
    
        h1 {
            color: forestgreen;
            text-align: center;
        }
 
        .gfgNew {
            border: 5px solid crimson;
        }
 
        .gfgOld {
            border: 5px solid orange;
        }
    

 

    
        Geeks For Geeks
    
 
    
        
          {
            "new": {
              "imageUrl":
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",
              "style": "gfgNew"
            },
            "old": {
              "imageUrl":
"https://media.geeksforgeeks.org/wp-content/uploads/20201026154131/logogfg.png",
              "style": "gfgOld"
            }
        }
      
    
 
    
         

            Each logo has different border color...
        
 
        
            This is old logo...
        
        
            
            
            
            
                New Logo
            
            
                Old Logo
            
        
    

 

输出：

当点击 New Logo 按钮时，图像和边框颜色都会动态更改。当我们点击 Old Logo 按钮图像和边框颜色更改为之前的组合。