• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

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

编程语言 Geekerstar 1年前 (2018-04-14) 515次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

条件渲染

v-if

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

<div v-bind:style="styleObject" id="watch-example">
    <p v-if="ok">Yes</p>
    <p v-else>No</p>
</div>
<script type="text/javascript">
    var vm = new Vue({ 
        el: "#watch-example",
        data: { 
            ok:true
         }
     })
</script>

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

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

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else 和 v-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>

用 key 管理可复用的元素

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

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

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`

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

> 注意,`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` 是数组元素迭代的别名。

<ul id="example-1">
  <li v-for="item in items">
    { {  item.message  } }
  </li>
</ul>
<script>
    var example1 = new Vue({ 
      el: '#example-1',
      data: { 
        items: [
          {  message: 'Foo'  },
          {  message: 'Bar'  }
        ]
       }
     })
</script>

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

<ul id="example-2">
  <li v-for="(item, index) in items">
    { {  parentMessage  } } - { {  index  } } - { {  item.message  } }
  </li>
</ul>
<script>
    var example2 = new Vue({ 
      el: '#example-2',
      data: { 
        parentMessage: 'Parent',
        items: [
          {  message: 'Foo'  },
          {  message: 'Bar'  }
        ]
       }
     })
</script>

一个对象的 v-for

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

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    { {  value  } }
  </li>
</ul>
<script>
    new Vue({ 
      el: '#v-for-object',
      data: { 
        object: { 
          firstName: 'John',
          lastName: 'Doe',
          age: 30
         }
       }
     })
</script>

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

<div v-for="(value, key) in object">
  { {  key  } }: { {  value  } }
</div>

第三个参数为索引:

<div v-for="(value, key, index) in object">
  { {  index  } }. { {  key  } }: { {  value  } }
</div>

Key

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

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

数组更新检测

变异方法(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'
 })

显示过滤/排序结果

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

<li v-for="n in evenNumbers">{ {  n  } }</li>

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

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

<li v-for="n in even(numbers)">{ {  n  } }</li>

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

一段取值范围的 v-for

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

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

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

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

<ul>
  <template v-for="item in items">
    <li>{ {  item.msg  } }</li>
    <li class="divider"></li>
  </template>
</ul>

`v-for` with `v-if`

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

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

<li v-for="todo in todos" v-if="!todo.isComplete">
  { {  todo  } }
</li>

上面的代码只传递了未完成的 todos。

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

<ul v-if="todos.length">
  <li v-for="todo in todos">
    { {  todo  } }
  </li>
</ul>
<p v-else>No todos left!</p>

一个组件的 v-for

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

<my-component v-for="item in items" :key="item.id"></my-component>

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

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

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
<script>
    Vue.component('todo-item', { 
      template: '\
        <li>\
          { {  title  } }\
          <button v-on:click="$emit(\'remove\')">X</button>\
        </li>\
      ',
      props: ['title']
     })

    new Vue({ 
      el: '#todo-list-example',
      data: { 
        newTodoText: '',
        todos: [
          { 
            id: 1,
            title: 'Do the dishes',
           },
          { 
            id: 2,
            title: 'Take out the trash',
           },
          { 
            id: 3,
            title: 'Mow the lawn'
           }
        ],
        nextTodoId: 4
       },
      methods: { 
        addNewTodo: function () { 
          this.todos.push({ 
            id: this.nextTodoId++,
            title: this.newTodoText
           })
          this.newTodoText = ''
         }
       }
     })
</script>

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Vue.js入门-3-条件渲染、列表渲染
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00