Vue.js学习与入门（四）渲染

最新推荐文章于 2024-06-16 17:03:37 发布

yi诺千金

最新推荐文章于 2024-06-16 17:03:37 发布

阅读量126

点赞数

分类专栏：前端开发 Vue学习与入门

本文链接：https://blog.csdn.net/yimelancholy/article/details/102854574

版权

前端开发同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue学习与入门

9 篇文章 0 订阅

订阅专栏

条件渲染与列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 条件渲染 -->
        <!-- 哪个<p>标签的条件成立，就渲染哪个标签，其他不满足条件的<p>标签就会被销毁 -->
        <div>
            <p v-if="score>=90">优秀</p>
            <p v-else-if="score>=80">良好</p>
            <p v-else-if="score>=70">中等</p>
            <p v-else-if="score>=60">及格</p>
            <p v-else>不及格</p>
        </div>
        <hr>
        <!-- 列表渲染 -->
        <div>
            <ul>
                <!-- v-for循环渲染<li>标签，
                    其中students是数据源，student是数组元素迭代的别名 -->
                <li v-for="student in students">
                    name:{{student.name}},age:{{student.age}}
                </li>
            </ul>
        </div>
        <hr>
        <div>
            <ul>
                <!-- index是索引，key是键名 -->
                <li v-for="(value,key,index) in stu">
                    {{index}}---{{key}}:{{value}}
                </li>
            </ul>
        </div>
    </div>

    <script>
        var app =new Vue({
            el:'#app',
            data:{
                score:80,
                students:[
                    {name:'zhangsan',age:12},
                    {name:'lisi',age:23},
                    {name:'wangwu',age:11}
                ],
                stu:{//键值对的形式保存的数据
                    name:'zhangsan',
                    age:31,
                    gender:'男'
                },

            }
        })
    </script>
</body>
</html>

yi诺千金

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习与入门（四）渲染

条件渲染与列表渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>render</title> <script type="text/javascript" src="js/vue.js">&l...
复制链接

扫一扫

专栏目录