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程序设计有所帮助。