Vue-js-文档学习记录（三）- 条件、列表和事件

Share

条件渲染

1. v-if 控制元素是否渲染

1
<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一个 “else” 块，v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别。

1
2
3
4
5
6
<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

2. v-else-if 顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

1
2
3
4
5
6
7
8
9
10
11
12
<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>

3. v-show 控制元素是否显示

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

4. v-if 与 v-show 的不同

v-if 是真实的条件才会渲染，如果初始条件是假的则不会做任何处理，只有在条件第一次变为真时才开始局部编译

v-show 的元素会始终渲染并保持在 DOM 中，v-show 是简单的切换元素的 CSS 属性 display 。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

列表渲染

v-for 指令根据一组数组的选项列表进行渲染

基本用法

1
2
3
4
5
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

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

1
2
3
4
5
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

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

1
<div v-for="item of items"></div>

Template

如同 v-if 模板，你也可以用带有 v-for 的

范围

v-for 也可以取整数。在这种情况下，它将重复多次模板。

1
2
3
<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

事件处理器

v-on 指令监听 DOM 元素出发事件，可简写成

1
<div @click="handleClick"></div>        //v-on:click 可简写成 @click

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

1
<li @click="handleClick( $event )"></li>

事件修饰符

v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

1
2
3
4
5
6
7
8
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">