如何在 Google AMP 中使用 amp-bind 切换除法的可见性？

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

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

Google AMP 的 amp-bind 由三个主要概念组成：

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

示例：根据所选选项动态隐藏和显示分区。

  

    
    GeeksForGeeks | 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;
        }
    

  

    
        Geeks For Geeks
    
  
    
    
        Select the option: 
        
            No selection
            Option 1
            Option 2
        
        
  
        
            You have selected Option 1
        
          
        
            You have selected Option 2
        
    

  

输出：