指令是带有 v- 前缀的特殊属性。

 

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

 

实例

 

<div id="app">

    <p v-if="seen">现在你看到我了</p>

</div>

    

<script>

const app = {

  data() {

    return {

      seen: true  /* 改为false，信息就无法显示 */

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>

 

 

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

 

另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

 

实例

<div id="app">

  <ol>

    <li v-for="site in sites">

      {{ site.text }}

    </li>

  </ol>

</div>

<script>

const app = {

  data() {

    return {

      sites: [

        { text: 'Google' },

        { text: 'Runoob' },

        { text: 'Taobao' }

      ]

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>