vue的条件指令与循环指令

1 条件使用：

<div id="app-3">

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

</div>

var app3 = new Vue({

  el: '#app-3',

  data: {

    seen: true

  }

})

v-if就是一个条件指令，如果后面条件满足就会显示元素，否则就会不显示。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-else>Oh no </h1>

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">

  A

</div>

<div v-else-if="type === 'B'">

  B

</div>

<div v-else-if="type === 'C'">

  C

</div>

<div v-else>

  Not A/B/C

</div>

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS属性display。

2 循环使用：

<div id="app-4">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

 

var app4 = new Vue({

  el: '#app-4',

  data: {

    todos: [

      { text: '学习 JavaScript' },

      { text: '学习 Vue' },

      { text: '整个牛项目' }

    ]

  }

})

其中v-for是一个循环指令，循环一个数组，todes是一个数组，todo是循环变量，通过循环变量获取值。

v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">

  <li v-for="(item, index) in items">

    {{ parentMessage }} - {{ index }} - {{ item.message }}

  </li>

</ul>

 

var example2 = new Vue({

  el: '#example-2',

  data: {

    parentMessage: 'Parent',

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

// 结果：

// Parent 0  Foo

// Parent 1  Bar

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。