Vue 响应式渲染 - 条件渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/145536824

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

条件渲染

v-if

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <div v-if="isShow">显示</div>
        <div v-if="!isShow">隐藏</div>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
                isShow : true
            }
        })
    </script>
</body>
</html>

v-if-else

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <div v-if="isShow">显示</div>
        <div v-else>隐藏</div>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
                isShow : true
            }
        })
    </script>
</body>
</html>

模版template

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <template v-if="isShow">
            <div>11111</div>
            <div>22222</div>
            <div>33333</div>
        </template>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
                isShow:true
            }
        })
    </script>
</body>
</html>

效果如下：

物流状态显示判断

设置数据

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

示例如下：

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

不同状态渲染

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

示例如下：

<div id="box">
    <ul>
        <li v-for="item in datalist">
            {
  
  {item.title}}---

            <span v-if="item.state === 0">未付款</span>
            <span v-else-if="item.state === 1">待发货</span>
            <span v-else-if="item.state === 2">已发货</span>
            <span v-else>已完成</span>
        </li>
    </ul>
</div>

效果如下：