vue教程1-04 事件 v-on:click="函数"  

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

实例：为data添加数据

实例，点击按钮，div显示/隐藏切换

实例，vue实现简易留言本

事件:        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}}
                         
                    删除                
                    
                    
                         
                    删除全部                
                    
                    
                         
                    
暂无数据....
                
                    
               
      
        
              
      
            
       
                
        
                    
         
                        
           ×                         
          
确认删除么?
                    
         
                    
         
                        
          取消                        
          确认