08-vuejs研究-vuejs基础-v-if和v-for指令

最新推荐文章于 2023-04-08 20:22:41 发布

feng_fly_28

最新推荐文章于 2023-04-08 20:22:41 发布

阅读量99

点赞数

分类专栏： day02 CMS前端开发文章标签： javascript

本文链接：https://blog.csdn.net/minihuabei/article/details/112829458

版权

day02 CMS前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <ul>
        <li v-for="(item,index) in list" :key="index" v-if="index % 2 ==0">{{index}}--{{item}}</li>

    </ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            list:[1,2,3,4,5],
        }
    });
</script>
</html>

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <ul>
        <li v-for="(value,key) in user">{{key}}--{{value}}</li>

    </ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            user:{uname:'itcast',age:10},
        }
    });
</script>
</html>

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <ul>
        <li v-for="(item,index) in userlist" :key="item.user.uname">
            <div v-if="item.user.uname == 'itheima'" style="background: #00f50c">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>
            <div v-else="">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>

        </li>
    </ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            userlist:[
                {user:{uname:'itcast',age:10}},
                {user:{uname:'itheima',age:11}}
            ]
        }
    });
</script>
</html>