Vue.js 点击事件

Vue.js 是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

v-on 指令用于让用户与应用程序交互。它可以附加到调用 Vue 实例上的方法的事件侦听器。这允许在单击事件发生时调用任何所需的函数。

示例 1：

• 文件名- index.html：

  HTML

      
    
  
  
      
          Counter - {{counter}}
          
            Increment
            
          
            Decrement
            
      
      
    

  
  
  
  
  

• 文件名-app.js：

  Javascript

  const parent = new Vue({
      el : '#parent',
      data : {
          counter : 0
      },
      methods: {
         increment : function(){
             this.counter += 1
         },
         decrement : function(){
             this.counter -= 1
         }
      }
  })
  

输出：

示例 2：

• 文件名- index.html：

  HTML

      
        
  
  
      
          
            
          
            Change Color
            
      
      

• 文件名-app.js：

  Javascript

  const parent = new Vue({
      el : '#parent',
      methods: {
          changeColor: function () {
              const box =
                document.querySelector('#box')
              const red =
                Math.floor(Math.random() * 256 + 1)
              const green =
                Math.floor(Math.random() * 256 + 1)
              const blue =
                Math.floor(Math.random() * 256 + 1)
    
              box.style.background =
                "rgb("+red+", "+green+", "+blue+ ")"
          }
        }
  })
  

输出：