vue学习资料三（v-if、v-else、v-show、v-for）

VUE

模板指令

• 还记得underscore.js中if如何书写的吗？

条件判断v-if

• 直接在元素上添加v-if
• 如果该数据KEY是true的话，我们将该dom元素显示，否则将该dom元素隐藏
• v-else: 与v-if配合使用，如果if不成立则显示v-else；

    
特价原价{{price | currency "￥"}}

• 如果要操作多个元素判断，可以使用template标签

    

    
    
        {{price | currency "￥"}}
    

• 使用underscore.js把一个列表渲染出来：

使用vue循环模板

v-for = "item in data"

• item 是data数组中的一个成员；

    

    
        
{{item}}
    

• 有时候data的数据结构比较复杂该如何？

    

    
        
{{item.type}} | {{item.title}}
    

使用v-if:如果type有值，则会显示前面的标签，如果没有则不会显示；

如果v-for需要循环多个节点元素，我们也可以使用template模板

v-show

v-show = "key",如果key是true,则显示该元素；
他的作用也是显示，但是只能处理一个标签；

实现支付宝登录页面实时输入框输入内容后，显示下拉框匹配邮箱后缀的例子：

    
    
    



    

        
        用户名
        

        
            
{{num}}{{item}}