Vue 条件渲染 列表渲染 事件处理 表单输入绑定

#条件渲染

v-if 指令用于条件性的渲染一块内容.这块内容只会在指令的表达式返回truthy值的时候被渲染.

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

也可以使用v-else 添加一个 'else' 块

<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no ??h1>

指令概括:

v-if

v-else-if

v-else-if

v-else

用法:

<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-if 与v-show的区别:

v-if:真干活,真渲染,不满足条件,html 树上,就没有该 节点.

v-show:假干活,真偷懒,只是简单地 控制元素的 display 属性,在html树上是 可以看到的.

如果,html 上的某个模块很重要,不满足条件,不显示的话,请用 v-if,这样就能保证不会通过 调试方式 拿到 越权信息.

如果信息不重要,且切换频繁,可以用 v-show,这方便显示,减少渲染开销.

v-if 与v-for的 使用:

v-if 与v-for 不要同时使用在 同一个元素 节点上.

如果控制某个列表显示与否,可以将 v-if 用在 v-for 节点的上一个节点,或者更上层节点上.

#列表渲染

用v-for 来渲染列表,这是最常用的 操作,没有之一.

语法形式:

v-for ='item in items '  :key='item.message'

例:

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  li>
ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块中，我们可以访问所有父作用域的 property。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' }
    ]
  }
})

这里面的parentMessage 是父作用域的 property.

在 v-for 里使用对象:使用 v-for 来遍历一个对象的 property(属性)。

v-for 的状态维护,使用key 完成,

<div v-for="item in items" v-bind:key="item.id">
  
div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

在v-for里使用值范围, v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} span>
div>

在