vue 条件渲染+列表渲染

最新推荐文章于 2023-07-10 17:13:44 发布

MW0309

最新推荐文章于 2023-07-10 17:13:44 发布

阅读量169

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42222342/article/details/104621426

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

条件渲染

实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">click</button>
        <div v-if="isCreated">动态创建和删除-11111111</div>
        <div v-else>动态创建和删除---22222222</div>
        <ul v-if="isCreated">
            <li v-for="data in datalist">
                {{data}}
            </li>
        </ul>
        <div v-else>
            购物车空空如也
        </div>
        <div v-if="which===1">
            11111
        </div>
        <div v-else-if="which===2">
            22222
        </div>
        <div v-else>
            33333
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                isCreated:false,
                datalist:[],
                which:1
            },
        methods:{
                handleClick(){
                    this.isCreated=!this.isCreated
                    this.datalist=["111","222","333"]
                }
            },
        })
    </script>
</body>
</html>

效果图
在这里插入图片描述

列表渲染

实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist">
                {{data}}--{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="(data,index) of datalist">
                {{data}}--{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="(data,key) in obj">
                {{data}}--{{key}}
            </li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                datalist:["111","222","333"],
                obj:{
                    myname:"MW",
                    age:18,
                    major:"计算机专业"
                }
            }
        })
    </script>
</body>
</html>