📜  如何在 Google AMP 中使用 amp-bind 动态更改/更新文本?

📅  最后修改于: 2022-05-13 01:56:39.140000             🧑  作者: Mango

如何在 Google AMP 中使用 amp-bind 动态更改/更新文本?

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

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

HTML


HTML


 

    
    Google AMP amp-bind
 
    
 
    
 
    
 
    
 
    
 
    
 
    

 

    

        Geeks For Geeks     

          
        
            Welcome             to GeeksForGeeks         
        
             
 


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

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

要绑定文本,我们将使用属性,它有助于动态更改文本。

例子:

HTML



 

    
    Google AMP amp-bind
 
    
 
    
 
    
 
    
 
    
 
    
 
    

 

    

        Geeks For Geeks     

          
        
            Welcome             to GeeksForGeeks         
        
             
 

输出: