Vue笔记【七】【条件渲染和列表渲染】【持续更新】

念故思旧

已于 2023-10-15 16:22:45 修改

阅读量29

点赞数

分类专栏： Vue2学习文章标签： vue.js 笔记 javascript

于 2023-10-15 16:20:42 首次发布

本文链接：https://blog.csdn.net/weixin_56612338/article/details/133843983

版权

Vue2学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

13.条件渲染

13.1 v-if指令

v-if判断条件是否成立,若条件为真,则渲染元素，若为假，则不渲染元素
一般与v-else-if 和v-else搭配使用

13.2示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        温度:<input type="text" v-model="temperature">
        <br><br>
        天气:
        <span v-if="temperature<=10">寒冷</span>
        <span v-else-if="temperature<=25">凉爽</span>
        <span v-else>炎热</span>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            temperature: 0
        },
    });
</script>
</html>

13.3运行结果

在这里插入图片描述

13.4 v-show

v-show同样也是条件渲染,v-show="true|false"
true则显示元素，false则隐藏元素
和v-if的区别是:v-if条件为真时才会解析渲染元素，v-show无论是真还是假都会渲染元素

13.4.1示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <p v-show="false">我是隐藏元素</p>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            temperature: 0
        },
    });
</script>
</html>

13.4.2运行结果

在这里插入图片描述

从图中可以看出v-show条件为false时，会把display设为none，只是隐藏元素

14 template

只是一个占位标签，vue不会把这个标签渲染到页面上

14.1 示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <template v-if="1==1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </template>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
    });
</script>

</html>

14.2运行结果

在这里插入图片描述

从运行结果中的源代码可以看出,template标签并没有被当做html标签渲染到页面中

15.列表渲染

15.1 v-for遍历

v-for可以遍历数组，字符串，对象，指定遍历次数

15.1.1 遍历数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>遍历数组</h2>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(name,index) in names">
                {{name}}-{{index+1}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            names: ['张三', '李四', '王五'],
        }
    });
</script>

</html>

15.1.2 遍历数组中的对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>遍历数组中的对象</h2>
        <table border="1px">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="(student,index) in students">
                <td>{{index+1}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.sex}}</td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            students: [{ name: '张三', age: 19, sex: '男' }, { name: '李四', age: 20, sex: '女' },
            { name: '王五', age: 16, sex: '男' }, { name: '赵倩', age: 18, sex: '女' }],
        }
    });
</script>

</html>

15.1.3遍历对象的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>遍历对象的属性</h2>
        <!-- 遍历对象的属性 -->
        <ul>
            <li v-for="(propertyName,value) of stu">
                {{propertyName}},{{value}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            stu: {
                name: 'aaa',
                age: 18,
                sex: '女'
            }
        }
    });
</script>

</html>

15.1.4 遍历字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 遍历字符串 -->
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(c,index) in str">
                {{c}},{{index}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            str: 'helloVue'
        }
    });
</script>

</html>