Vue 响应式渲染 - 条件渲染

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染

目录

条件渲染

v-if

v-if-else

模版template

物流状态显示判断

设置数据

不同状态渲染

总结

---

条件渲染

v-if

使用Vue条件判断显示和 隐藏。

示例如下：

    
    
  


    

        
显示
        
隐藏
    
    

v-if-else

在原来的例子上使用else判断来执行原有否的情况。

示例如下：

    
    
  


    

        
显示
        
隐藏
    
    

模版template

template就是一个包装元素，不会真正创建在页面上。

示例如下：

效果如下：

物流状态显示判断

设置数据

写一个静态的模拟列表数据。

示例如下：

let vm = new Vue({
        el:'#box',
        data: {
            isShow : true,
            datalist: [
                {
                    title:'电脑',
                    state:0,
                },
                {
                    title:'笔记本',
                    state:1,
                },
                {
                    title:'手机',
                    state:2,
                },
                {
                    title:'硬盘',
                    state:3,
                }
            ]
        }
    })

 

不同状态渲染

对物流不同状态进行判断显示。

示例如下：

    

        

            {
  
  {item.title}}---

            未付款
            待发货
            已发货
            已完成
        
    

效果如下：

 

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染