Vue（二）——常用内置指令

前言

Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。

常用的Vue.js内置指令：

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

v-if指令

——条件渲染指令，根据表达式的真假删除和插入元素。

基本语法：

v-if="expression"

例：

       <div id="app">
        <h2>Hello Vue!</h2>
        <p v-if="flag1">Hello World!</p>
        <p v-if="flag2">Not Found 404</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: true,
                flag2: false
            }
        })
    </script>

页面显示：

 

v-show指令

——条件渲染指令，根据表达式的真假删除和插入元素。

同为条件渲染指令，它和v-if指令的区别见 v-if和v-show指令及其区别 。

基本语法：

v-show="expression"

例：

  <div id="app">
        <h2>Hello Vue!</h2>
        <p v-show="flag1">Hello World!</p>
        <p v-show="flag2">Not Found 404</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: true,
                flag2: false
            }
        })
    </script>

页面显示结果：