Vue.js入门-3-条件渲染、列表渲染

条件渲染

v-if

我们可以使用v-if和v-else,实现逻辑判断功能。

Yes

No

%MINIFYHTML81b6d46a1ee0fe21fbdd9154fcd9fd726%

在 `<template>` 元素上使用 `v-if` 条件渲染分组

`v-if`切换多个元素,可以把一个 `<template> `元素当做不可见的包裹元素,并在上面使用 `v-if`。最终的渲染结果将不包含 `<template> `元素。


v-else 和 v-else-if

A
B
C
Not A/B/C

用 key 管理可复用的元素

使用key可以控制元素重用。例如下面代码,当允许用户在不同的登录方式之间切换。如果不添加key,则输入的数据会保存



v-show

与`v-if`类似,只不过`v-show`会先进行渲染,操作CSS属性`display`

`v-show` 与 `v-if`相比

`v-if`是真实的条件渲染,会确保条件块在切换中适当地销毁与重建。也是惰性的,如果在初始化渲染时条件为假,则什么也不做

`v-show` 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说`v-if`有更高的切换消耗,`v-show`有更高的初始化消耗。频繁切换用`v-show`,运行条件不大可能改变用`v-if`

Hello!

> 注意,`v-show` 不支持 `<template>` 元素,也不支持 `v-else`。

v-if 与 v-for 一起使用

当 `v-if` 与 `v-for` 一起使用时,`v-for` 具有比 `v-if` 更高的优先级。

***

列表渲染

用 v-for 把一个数组对应为一组元素

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

  • { { item.message } }
%MINIFYHTML81b6d46a1ee0fe21fbdd9154fcd9fd727%

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

  • { { parentMessage } } - { { index } } - { { item.message } }
%MINIFYHTML81b6d46a1ee0fe21fbdd9154fcd9fd728%

一个对象的 v-for

你也可以用 `v-for` 通过一个对象的属性来迭代。

  • { { value } }
%MINIFYHTML81b6d46a1ee0fe21fbdd9154fcd9fd729%

你也可以提供第二个的参数为键名:

{ { key } }: { { value } }

第三个参数为索引:

{ { index } }. { { key } }: { { value } }

Key

当Vue用v-for正在更新已渲染过的元素列表时,默认如果数据项的顺序被改变,Vue将不是移动Dom元素来匹配数据项的顺序。而是简单复用此处每个元素,确保已经渲染过了。为了让Vue重新排序现有元素,需要给每一项提供一个key

数组更新检测

变异方法(mutation method)

– push()
– pop()
– shift()
– unshift()
– splice()
– sort()
– reverse()

非变异 (non-mutating method) 方法

`filter()`, `concat()` 和 `slice()` 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) { 
  return item.message.match(/Foo/)
 })

对象更改检测注意事项

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

Vue.set(vm.userProfile, 'age', 27)

// 还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名

vm.$set(this.userProfile, 'age', 27)

为已有对象赋予多个新属性,比如使用 `Object.assign()` 或 `_.extend()`

在这种情况下,你应该用两个对象的属性创建一个新的对象。

this.userProfile = Object.assign({  }, this.userProfile, { 
  age: 27,
  favoriteColor: 'Vue Green'
 })

显示过滤/排序结果

我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的**计算属性**。

  • { { n } }
  • data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } }

    在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个 method 方法:

  • { { n } }
  • data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } }

    一段取值范围的 v-for

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

    { { n } }

    `v-for` on a `<template>`

    类似于 `v-if`,你也可以利用带有 `v-for` 的 `<template>` 渲染多个元素。比如:

    `v-for` with `v-if`

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。

    当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

  • { { todo } }
  • 上面的代码只传递了未完成的 todos。

    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 `<template>`)上。如:

    • { { todo } }

    No todos left!

    一个组件的 v-for

    在自定义组件里,你可以像任何普通元素一样用 v-for 。

    
    

    > 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

    **一个简单的 todo list 的完整例子:**

    %MINIFYHTML81b6d46a1ee0fe21fbdd9154fcd9fd7210%
    本站所有文章均由网友分享,仅用于参考学习用,请勿直接转载,如有侵权,请联系网站客服删除相关文章。若由于商用引起版权纠纷,一切责任均由使用者承担
    极客文库 » Vue.js入门-3-条件渲染、列表渲染

    Leave a Reply

    欢迎加入「极客文库」,成为原创作者从这里开始!

    立即加入 了解更多