Vue之指令

指令

描述

代码

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

当条件变化时该指令触发过渡效果

<div v-if="Math.random() > 0.5">

  Now you see me

</div>

v-else

不需要表达式

<div v-else>Now you don‘t </div>

v-show

根据表达式之真假值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果

v-for

根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

<div v-for="item in items">

  {{ item.text }}

</div>

v-bind

用于动态绑定属性和数据，比如

v-bind:class=‘classname’

更新HTML

缩写为“： ”

绑定class：<div v-bind:class="{

active: isActive }"></div>

绑定内联样式：

<div v-bind:style="styleObject">

</div>

Vue:

data: {

  styleObject: {

    color: ‘red‘,

    fontSize: ‘13px‘

  }

}

v-on

绑定事件监听器，触发JavaScript代码

缩写为@

<div id="example-2">

   <button v-on:click="greet">

Greet</button></div>

Vue:

methods: {

  greet: function (event) {

    alert(‘Hello ‘ + this.name + ‘!‘) }

v-model

在表单控件或者组件上创建双向双向绑定

<input v-model="message"

placeholder="edit me">

Vue:

  data: { message }

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。