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>效果是一样的

vue 列表渲染-05

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

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

对象的更改检测

显示过滤/排序结果

组件当中的v-for

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

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