Vue的for循环和if:else-if；else:语法

最新推荐文章于 2024-08-21 15:38:24 发布

wgq18586361686

最新推荐文章于 2024-08-21 15:38:24 发布

阅读量308

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wgq18586361686/article/details/121177634

版权

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<ul id="pink">
    <li v-for="item in items">{{item.a}}</li>
</ul>


</body>

<script>
    var pink = new Vue({
        el: "#pink",
        data: {
            items:[{a: '赵云'},{   a: '张飞'},{a: '李白'}
            ]

        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            type: 's'
        }
    });

</script>
</html>

效果图