尚硅谷Vue学习笔记11：条件渲染——列表渲染

最新推荐文章于 2023-08-21 08:11:02 发布

晚风时亦鹿

最新推荐文章于 2023-08-21 08:11:02 发布

阅读量182

点赞数 1

分类专栏： Vue2.0-Vue3.0 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_62491934/article/details/126834443

版权

Vue2.0-Vue3.0 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script type="text/javascript" src="../../../图片素材/vue.js"></script>
</head>
<body>
    <!-- 备注：使用v-if时,元素可能无法获取到,而使用v-show一定能获取到 -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- v-show="true==display:none -->
        <!-- <h2 v-show="true">欢迎来到{{name}}</h2> -->
         <h2>当前的n值是:{{n}}</h2>
         <!-- @click后面是表达式 -->
         <!-- 可以使用v-show做条件渲染 也可以使用v-if做条件渲染 -->
         <button @click="n++">点我n+1</button>
        <div v-if="n==1">Angular</div>
        <div v-else-if="n==2">React</div>
        <div v-else-if="n==3">Vue</div>
        <div v-else>(′д｀ )…彡…彡</div>
    </div>
</body>

<script type="text/javascript">
        Vue.config.productionTip=false //阻止vue在启动时生成生产提示。

    new Vue({
        el:"#root",
        data:{
            name:"尚硅谷",
            n:0
        }
    
    })
</script>
</html>`在这里插入代码片`

在这里插入图片描述

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script type="text/javascript" src="../../../图片素材/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                 {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{value}}-{{k}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>
    </div>
<script type="text/javascript">
        Vue.config.productionTip=false //阻止vue在启动时生成生产提示。

    new Vue({
        el:"#root",
        data:{
            persons:[
                {id:"001",name:"张三",age:18},
                {id:"002",name:"王三",age:19},
                {id:"003",name:"雷三",age:20}
            ],
            car:{
                name:"奥迪A8",
                price:"70万",
                color:"黑色"
            },
            str:'hello'
        }
    })
</script>
</body>
</html>