零基础入门JavaWeb——Vue的渲染

最新推荐文章于 2024-04-26 17:37:33 发布

程序员丶星霖

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量164

点赞数

分类专栏：前端技术文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hunterarley/article/details/128187940

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。

1.1 v-if

1.2 v-else

1.3 v-show

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
            目标：flag为true图片就显示，否则就隐藏

            用条件渲染将flag和img标签进行绑定
                1. v-if：如果值为false，直接删除掉标签
                2. v-else“如果值为true，就直接删除标签

            v-if可以单独使用，但是v-else不能单独使用

            v-show：也可以进行条件渲染，不是删除标签，而十使用CSS里的display属性设置为none隐藏标签
        -->
<!--        <img src="../img/前端.jpeg" width="400" height="300" v-if="flag">-->
<!--        <img src="../img/前端.jpeg" width="400" height="300" !v-else="flag">-->

        <img src="../img/前端.jpeg" width="400" height="300" v-show="flag">
    </div>
    <script>
        var vue = new Vue({
            "el":"#app",
            "data":{
                "flag":true
            }
        });
    </script>
</body>
</html>

二、列表渲染

2.1 遍历一个简单的数组

示例代码

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!--
                使用v-for进行绑定：
                    1. v-for写在哪里？遍历出来一个数据要添加一个什么标签，就写在该标签上
                    2. v-for的值：就写要遍历的数据模型(遍历出来的内容，下标) in 要遍历的数据模型
            -->
            <li v-for="(fruit,index) in fruitList" v-bind:value="index">{{fruit}}</li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            "el":"#app",
            "data":{
                "fruitList":[
                    "Apple",
                    "Banana",
                    "Orange",
                    "Grape",
                    "Dragonfruit"
                ]
            }
        });
    </script>
</body>
</html>

2.2 遍历一个对象数组

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染的加强练习</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="e" width="500">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>国籍</th>
            </tr>
            <tr v-for="(person,index) in userList">
                <td>{{index+1}}</td>
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.address}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vue = new Vue({
            "el":"#app",
            "data":{
                "userList":[
                    {"name":"刘备","age":18,"address":"蜀国"},
                    {"name":"孙权","age":19,"address":"吴国"},
                    {"name":"曹操","age":20,"address":"魏国"}
                ]
            }
        });
    </script>
</body>
</html>