指令2

实现双向绑定v-model

注：双向绑定只能用在表单控件上

    
        
        
        
    
    
        

            
{{msg}}
            
            
            
            
            
        
        
    

点击事件绑定（单向）

    
        
        
            
            切换
        
        
    

简易计算器

   
        

            
            
                +
                -
                *
                /
            
            
            
            
        
        
    

通过class绑定赋予样式

    
    
        

            
            
p标签，样例文本
            
            
            
p标签，样例文本
            
p标签，样例文本
            
            
p标签，样例文本
        
        
    

使用内联样式块

        
    
    
        

            
            
这是一个h1标签
            
            
这是一个h1标签
            
            
这是一个h1标签
        
        
    

v-for循环

    
        

            
            
            
            
{{i}}--{{item}}
            

                

                
            
            
            
{{i}}--{{user.id}}--{{user.name}}
            
            
            
{{val}}--{{key}}--{{i}}
            
            
这是第{{count}}次循环
        
        
    

v-for中的使用问题

key值不绑定会发生选中错乱问题

    
        

            

                
                    
                    Id : 
                
                
                    
                    Name : 
                
                
                添加
            
            

                
                {{item.id}} ---- {{item.name}}
            
        
        
    

解决方法

    
    {{item.id}} ---- {{item.name}}

v-if和v-show

v-if控制的是整个标签是否出现，用于不经常改变切换的
v-show控制的是标签的style是否显示，用于经常切换显示和消失

    
        
        
        
    
    
        

            切换
            
            
            
            
            
这是v-if控制元素
            
这是v-show控制元素
        
        
    

v-if补充

v-if还有v-else-if及v-else