vue 列表渲染-05

• v-for 可以遍历数组和者对象
  1。v-for = "(item index ) in items"
  当items为数组的时候item代表数组中的每一项 index代表数组中的索引
  2。v-for = "(value key index ) in items"
  当items为对象的时候 value 为值 key 为键名 index 为索引
  3。key键值 当使用v-for更新已渲染过的dom元素的时候，默认“就地复用”
  为了保持唯一性，需要为每个循环的元素绑定一个唯一的key

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

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

数组变异方法(会改变原始的数据,能触发视图更新的方法)

• push() 往数组后面追加元素
• pop() 删除数组的最后一个元素
• shift() 在数组前面添加一个元素
• unshift() 伤处数组的最前面一个元素

非数组变异方法(生成一个新的数组，不会改变原来的数组)

• filter()
• concat()
• 当改变数组的长度的时候 或者给数组的单个赋值不会触发驶入更新 如下
  1。vm.items[indexOfItem] = newValue
  2。vm.items.length = newLength

数组改变其他方法

// Vue.set 参数(改变的数据，改变数据的索引，新的值)
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue) //Vue.$set 是全局vm.set的一个别名

// Array.prototype.splice 参数(改变值的位置，改变几个，新的值)
vm.items.splice(indexOfItem, 1, newValue)

对象的更改检测

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

• 对于已经创建的实例，Vue不能动态添加根级别的响应式属性，但可以使用vue.set(object,key,value)对对象添加响应式的属性如下

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

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

• 为对象添加多个属性可使用Object.assign()
  1。object.assign()不可合并不可枚举的对象

//参数以为目标对象 后面的参数式需要添加到目标对象的参数
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
    })
  }
}

• 使用methods 里面的方法

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

• 取一段范围值,下面的循环会执行10次

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

//result  1 2 3 4 5 6 7 8 9

• v-for with(和某某在一起)v-if

//渲染的v-if 会存在与每一项中
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

//当需要有条件的跳过循环可以在循环元素的外层添加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和在普通元素中使用式一样的 但是key值是必须的

注意：在组件中使用v-for 任何的值都不会传递到组件中去 我们需要 v-bind:值 用props接受值

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
>
</my-component>

• 简单的todolist切换如下

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <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>

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</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 = ''
    }
  }
})

在一些特殊的标签中只有特定的子标签才会以解析如ul 中的里li 如果需要在li中渲染模板 需要li标签中添加 is属性 is="todo-item" todo-iteme 为组件的名字同<todo-item>效果是一样的