web学习笔记（五十五）-优快云博客

本文链接：https://blog.youkuaiyun.com/shan33__/article/details/138917401

1. 配置代码片段的步骤

2. 条件判断

2.1 v-if、v-else、v-else-if

1. 配置代码片段的步骤

在Visual Studio Code中我们可以将常用的代码配置成代码片段，这样就可以在页面上快速输入大段代码了。

（1）通过下列网址将需要配置的代码转换为对应格式：

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

（2）点击设置页面中的用户代码片段

（3）点击新建全局代码片段文件，然后在输入框中输入自定义的命令名 eg:vuehtml;然后点回车。

（4）将通过网址转换后的代码粘贴到对应文件中，然后保存就可以在页面中使用自定义代码片段了。

2. 条件判断

2.1 v-if、v-else、v-else-if

v-if 指令用于选择性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。可以用来控制元素的显示和隐藏。
用v-else指令来表示v-if的指令条件为假时，要渲染的内容。

无论是v-if还是结合 v-else 都只是根据一个条件的真与假来进行选择性的渲染模板内容，若遇到需要判断多个条件时，则可以使用案例：成绩等级判断 v-else-if 指令配合 v-if 和 v-else 来完成。

<body>
    <div id="app">
        <!-- 条件判断指令 指令值为true则显示该元素 若值为false则隐藏该元素 -->
        <h1 v-if="age<18">未成年</h1>
        <h1 v-else>成年</h1>
        <h2 v-if="num<5">小于5</h2>
        <h2 v-else-if="num==5">等于5</h2>
        <h2 v-else>大于5</h2>
    </div>
    <script src="./vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age: 17,
                num:5,