Vue.js —— v-if v-else v-show 指令（二）

if..else.. 和常规语法一样，是做条件判断的，本例子，`v-if` 和 `v-else` 绑定了 `isLogin`，在 js 中控制 `isLogin`的值，`true`显示绑定 `v-if` 的标签中的文本，`false` 则显示绑定 `v-else` 的标签中的文本。

李钦。

9366人浏览 · 2019-10-31 20:00:50

李钦。 · 2019-10-31 20:00:50 发布

if…else… 和常规语法一样，是做条件判断的，本例子，v-if 和 v-else 绑定了 isLogin，在 js 中控制 isLogin的值，true显示绑定 v-if 的标签中的文本，false 则显示绑定 v-else 的标签中的文本。 v-show 也是控制显示输出的，用法一样的，这里没写例子，二者的区别的是，v-if 控制加载不加载，v-show控制 css 中 display 值，v-if 减轻服务器压力，v-show 更流畅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <div v-if='isLogin'>你好，李小钦</div>
        <div v-else='isLogin'>再见，李小钦</div>
    </div>
    <br>
      <p>v-if控制加载不加载，show控制css中display值,if减轻服务器压力，show更流畅</p>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>
</body>
</html>