Vue.js教程_5

2019-12-03 本文已影响0人五秋木

1. v-if

v-if指令条件性地渲染一块内容，只有在指令表达式返回truthy才会渲染。‘
在<template>元素上使用v-if渲染分组元素。<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>
还可以使用v-else和v-else-if搭配v-if使用。

使用key管理复用的元素。
例如用户在不同的登录方式之间切换：

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

在切换登陆方式时不会清除掉已经输入的内容，因为两个模板使用了相同的元素。input不会别替换--仅仅替换掉他的placeholder。
为了不复用placeholder，只需添加一个具有唯一值的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：始终会被渲染并保存在DOM中，v-show只是简单地切换元素的
CSS的display属性。v-show不支持<template>元素，也不支持v-else。
不推荐v-if与v-for一起使用，当一起使用时，v-for具有更高的优先级。

2. v-for

基于一个数组渲染一个列表，v-for使用item in items的格式，其中items为数据数组，item迭代对象。
格式例如：

<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>
    data: {
        items:[
            {message: "Foo"},
            {message: "Bar"}
        ]
      }

v-for可以访问所有父作用域的属性，以及支持可选参数：迭代对象的索引。

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
data: {
    parentMessage: 'Parent',
    items: [
        { message: 'Foo' },
        { message: 'Bar' }
    ]
}

v-for访问对象的所有元素，包含三个属性，示例如下：

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

数组的变化方法包括：(改变原始数组)
- push(item)
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
数组的替换方法：返回一个新数组
- filter()
- concat()
- slice()
数组变化：Vue不能检测出使用索引直接设置数据项和修改数组长度的变动，例如：vm.items[indexOfItem]=newValue和vm.items.length=newLength，这两种都不是响应式的。为了变成响应式的，需要使用特殊函数处理。
- 索引直接设置数据项，使用Vue.set全局方法和vm.items.splice这两种方法解决。例如：Vue,.set(vm.item, indexOfItem, newValue)和vm.items.splice(indexOfItem, 1, newValue)，也可以使用vm.$set实例方法，此方法是全局方法Vue.set的一个别名。
- 修改数组长度，直接使用vm.items.splice(newLength)解决。
对象变化：Vue不能检测对象属性的添加和删除。并且对于已经创建的实例，Vue不允许动态添加根级别的响应式属性，即不允许在data属性中添加元素，不过可以使用Vue.set(object, propertyName, Value)向嵌套对象添加响应式属性。
```
data: {
  userProfile: {
    name: 'Anika'
  }
}
Vue.set(vm.userProfile, "age", 27)
```
对已有的对象赋值多个新属性：将多个属性作为一个新对象。
```
vm.userProfile = Object.assign({}, vm.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 也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div><span v-for="n in 10">{{ n }} </span></div>
结果：1-10

类似v-if，使用template渲染一段包含多个元素的内容。

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

v-for与v-if搭配使用

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

只渲染未完成的部分。

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

有选择的跳过循环。

Vue.js教程_5

1. v-if

2. v-for

猜你喜欢

热点阅读