Vue（02）——Vue基础语法

最新推荐文章于 2024-05-08 13:18:09 发布

万里顾—程

最新推荐文章于 2024-05-08 13:18:09 发布

阅读量127

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/wpc2018/article/details/118363016

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Vue（02）——基础语法
- 1、条件语句
- 2、循环语句

Vue（02）——基础语法

1、条件语句

v-if

条件判断使用 v-if 指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <!--如果为true，则显示-->
    <h1 v-if="ok">yes-ok</h1>
    <h1 v-if="seen">yes-ok</h1>

</div>

<script>
   var vm =  new Vue({
        el: "#app",
        data: {
            ok: false,
            seen: false
        }
    });
</script>

</body>
</html>

v-if和v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <!--如果为true，显示yes-->
    <h1 v-if="ok">yes</h1>
    <!--否则显示no-->
    <h1 v-else>no</h1>
</div>

<script>
    var vm =  new Vue({
        el: "#app",
        data: {
            ok: false
        }
    });
</script>

</body>
</html>

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <!--如果为a，显示a-->
    <h1 v-if="type==='a'">a</h1>
    <!--如果为b，显示b-->
    <h1 v-else-if="type==='b'">b</h1>
    <!--如果为c，显示c-->
    <h1 v-else-if="type==='c'">c</h1>
    <!--如果都不是，显示d-->
    <h1 v-else>d</h1>
</div>

<script>
    var vm =  new Vue({
        el: "#app",
        data: {
            type: 'a'
        }
    });
</script>

</body>
</html>

注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ok: true
        }
    })
</script>
</body>
</html>

2、循环语句

v-for

v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环数组</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm =  new Vue({
        el: "#app",
        data: {
            items: [
                {message: "神明"},
                {message: "万里"},
                {message: "墨轩"}
            ]
        }
    });
</script>
</body>
</html>

也可以用 v-for 来遍历一个对象的属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环对象</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <li v-for="value in object">
        {{value}}
    </li>
</div>

<script>
    var vm =  new Vue({
        el: "#app",
        data: {
            object: {
                title: "顾一程",
                author: "一程"
            }
        }
    });
</script>

</body>
</html>