Vue常用指令

  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-on指令

v-if

​ v-if是条件渲染指令,特点是判断表达式是否为真,而决定是否渲染元素到Dom

V-if = “表达式”

​ 当条件内存在如下情况,将不进行元素的渲染:

  1. 表达式未声明。
  2. 表达式值为空
  3. 表达式值为false
  4. 表达式值为0

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-if</title>
    </head>
    <body>
    <div id="app">
        {{ meassage }}
        <h1 v-if="age >= 18">成年人</h1>
        <h1 v-if="age >= 100">老寿星</h1>
        <h1 v-if="0">这个不显示</h1>
        <h1 v-if="null">这个不显示</h1>
        <h1 v-if="no">这个不显示</h1>
        <h1 v-if="yes">这个不显示</h1>
        <h1 v-if="age">这个显示</h1>
        <h1 v-if="num">这个不显示</h1>
        <h1 v-if="bool_false">这个不显示</h1>
        <h1 v-if="bool_true">这个显示</h1>
        <h1 v-if="expNull">这个显示</h1>
    </div>
    </body>
    <script src="../js/vue.js"></script>
    <script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-if',
            age: 18,
            num:0,
            bool_false:false,
            bool_true:true,
            expNull:null
        }
    })
    </script>
    </html>
    

v-show指令

​ v-show也是条件渲染,和if区别是不管表达式是否为真都会渲染到DOM,它的底层实现是使用了css的style属性,其他与v-if没有任何区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-show</title>
</head>
<body>
    <div id="app">
        {{ meassage }}
        <h1 v-show="age >= 18">成年人</h1>
        <h1 v-show="age >= 100">老寿星</h1>
        <h1 v-show="0">这个不显示</h1>
        <h1 v-show="null">这个不显示</h1>
        <h1 v-show="no">这个不显示</h1>
        <h1 v-show="yes">这个不显示</h1>
        <h1 v-show="age">这个显示</h1>
        <h1 v-show="num">这个不显示</h1>
        <h1 v-show="bool_false">这个不显示</h1>
        <h1 v-show="bool_true">这个显示</h1>
        <h1 v-show="expNull">这个显示</h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-show',
            age: 18,
            num:0,
            bool_false:false,
            bool_true:true,
            expNull:null
        }
    })
</script>
</html>

使用控制台进行对比v-if与v-show的区别,加深理解

v-else指令

​ 可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-else</title>
</head>
<body>
    <div id="app">
        {{ meassage }}
        <h1 v-show="age >= 18">成年人</h1>
        <h1 v-else>未成年</h1>
        <h1 v-if="0">这个不显示</h1>
        <h1 v-else>这个显示</h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-else',
            age: 18,
            num:0,
            bool_false:false,
            bool_true:true,
            expNull:null
        }
    })
</script>
</html>

V-else 元素是否渲染到DOM,完全取决于前面跟的是v-show还是v-if

v-for指令

​ v-for指令基于一个数组循环渲染一个列表,它和js的遍历语法相似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-for</title>
</head>
<body>
    <div id="app">
        {{ meassage }}
        <h1 v-for="age in ages">成年人</h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-for',
            ages: [1,5,6,9],
        }
    })
</script>
</html>

v-bind指令

​ v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class,等号后边支持表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-bind</title>
    <style>
        .red{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app">
        {{ meassage }}
        <h1 v-for="age in ages" v-bind:class="age>5?css_class:''">成年人{{age}}</h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-bind',
            ages: [1,5,6,9],
            css_class: 'red'
        }
    })
</script>
</html>

v-on指令

​ v-on与v-bind类似,他主要是监听事件的时候使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用命令:v-on</title>
    <style>
        .red{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app">
        {{ message }}
        <h1 v-for="age in ages" v-bind:class="age>5?css_class:''" v-on:click="hello()">成年人{{age}}</h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    app = new Vue({
        el:"#app",
        data:{
            message : '这个是演示v-on',
            ages: [1,5,6,9],
            css_class: 'red'
        },
        methods:{
            hello:function () {
                console.log("hello")
            }
        }
    })
</script>
</html>

v-bind与v-on的简写方式

<!-- 完整语法 -->
<a v-bind:class="red">...</a>

<!-- 缩写 -->
<a :class="red">...</a>

<!-- 完整语法 -->
<a v-on:click="hello()">...</a>

<!-- 缩写 -->
<a @click="hello()">...</a>