P4 Vue的基本语法 v-bind、v-if、v-else-if、v-else、v-for

最新推荐文章于 2024-12-03 12:13:07 发布

原创最新推荐文章于 2024-12-03 12:13:07 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Vue.js中v-if, v-else-if, v-else与v-for指令的使用方法，通过实例展示了如何根据条件显示或隐藏元素，以及如何遍历数组并在页面上动态展示数据。

v-bind
需要导入约束

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

在这里插入图片描述

demo2.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<span v-if="ok" >ok</span>
<span v-else="ok" >no</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ok: true
        }
    });
</script>

</body>
</html>

测试：
在这里插入图片描述

v-else-if

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<span v-if="type==='A'">A</span>
<span v-else-if="type==='B'">B</span>
<span v-else="type==='C'">C</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type: 'A'
        }
    });
</script>

</body>
</html>

测试：
在这里插入图片描述

v-for

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<!--index获取下标-->
    <li v-for="(f,index) in fruits">
        {{f.fruit}}-----{{index}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            fruits: [{fruit:"apple"},{fruit:"orange"}]
        }
    });
</script>

</body>
</html>