前端进阶Vue框架-----条件渲染和包装元素（template）

最新推荐文章于 2024-10-16 18:35:07 发布

小不言啊

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量267

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/m0_61656944/article/details/122943242

版权

本文深入探讨了Vue框架中的条件渲染指令，包括v-if、v-else-if和v-else的使用，以及如何通过包装元素实现不破坏DOM结构的集体隐藏或显示效果，这对于前端开发尤其是Vue项目的优化至关重要。

摘要由CSDN通过智能技术生成

v-if

v-else-if

v-else

   <script src="/lib/vue.js"></script>
</head>
<body>

    <div>订单状态</div>
    <div id="box">
    <ul>
        <li v-for="item in datalist">
            {
  {item.ishw}}--


            <span v-if="item.satar===0">未发货</span>
            <span v-else-if="item.satar===1">已发货</span>
            <span v-else-if="item.satar===2">已支付</span>
            <span v-else="item.satar===3">已签收</span>
        </li>
    </ul>
</div>


    <script>
        new Vue({
            el:"#box",
            data:{
                // 属性中存的是数组对象
                datalist:[
                  {
                      ishw:"1111