Vue.js教程_5

1. v-if

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

5. v-show：始终会被渲染并保存在DOM中，v-show只是简单地切换元素的
   CSS的display属性。v-show不支持<template>元素，也不支持v-else。
6. 不推荐v-if与v-for一起使用，当一起使用时，v-for具有更高的优先级。

2. v-for

1. 基于一个数组渲染一个列表，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"}
           ]
         }
   

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

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

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

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

4. 数组的变化方法包括：(改变原始数组)
   • push(item)
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()
5. 数组的替换方法：返回一个新数组
   • filter()
   • concat()
   • slice()
6. 数组变化：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)解决。
7. 对象变化：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'
   })
   

8. 返回数组过滤或者排序后结果：
   不改变或者重置原始数据，而是显示一个经过过滤或者排序后的数组，使用计算属性。

   <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
       })
     }
   }
   

9. v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
   <div><span v-for="n in 10">{{ n }} </span></div>
   结果：1-10
10. 类似v-if，使用template渲染一段包含多个元素的内容。

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

11. 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>
    

    有选择的跳过循环。