【Vue】—2：判断循环（狂神说系列）

最新推荐文章于 2023-07-12 14:42:35 发布

六月的六

最新推荐文章于 2023-07-12 14:42:35 发布

阅读量498

点赞数 1

分类专栏： Vue（狂神说系列）

本文链接：https://blog.csdn.net/dearand/article/details/110469065

版权

Vue（狂神说系列）专栏收录该内容

11 篇文章 1 订阅

订阅专栏

2，判断循环

1，指令：带有v-前缀的

2，判断

调试界面：使用vue对象调用data中的属性

if else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
    <h1 v-if="ok">true</h1>
    <h1 v-else>no</h1>

</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        //el:元素，绑定
        el:"#app",
        data:{
            ok:true
        }
    });
</script>
</body>
</html>

if else-if else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>

</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        //el:元素，绑定
        el:"#app",
        data:{
            type:'A'
        }
    });
</script>
</body>
</html>

3，循环

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
<li v-for="item in items">
    {{item.message}}
</li>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        //el:元素，绑定
        el:"#app",
        data:{
            items:[
                {message:"java"},
                {message:"VUE"}
                ]
        }
    });
</script>
</body>
</html>

六月的六

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】—2：判断循环（狂神说系列）

2，判断循环1，指令：带有v-前缀的2，判断调试界面：使用vue对象调用data中的属性if else<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title></head><bo
复制链接

扫一扫

专栏目录