vue基础之事件v-onclick="函数"用法示例

本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考，具体如下：

v-on:click/mouseout/mouseover/dblclick/mousedown.....

事件:

v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
  el:'#box',
  data:{ //数据
    arr:['apple','banana','orange','pear'],
    json:{a:'apple',b:'banana',c:'orange'}
  },
  methods:{
    show:function(){  //方法，这里是show，不能用alert
      alert(1);
    }
  }
});

实例：为data添加数据

  
  
  
  
  


  

    
    

    

      

        {{value}}
      
    
  

运行效果：

实例：点击按钮，div显示/消失，切换。v-show="a"

实例：vue简易留言本

  
  
  
  
  
  
  
  


  

    

      

        用户名:
        
      
      

        年　龄:
        
      
      

        
        
      
    
    

    

      
用户信息表
      

        
序号
        
名字
        
年龄
        
操作
      
      

        
{{index+1}}
        
{{item.name}}
        
{{item.age}}
        

          删除
        
      
      

        

          删除全部
        
      
      

        

          
暂无数据....
        
      
    
    
    

      

        

          

            
              ×
            
            
确认删除么?
          
          

            取消
            确认
          
        
      
    
  

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。