vue-5-列表渲染

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一个数组的v-for
<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' }

    ]

  }

})

//也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>

//支持一个可选的第二个参数为当前项的索引

<ul id="example-2">

  <li v-for="(item, index) in items">

    {{ parentMessage }} - {{ index }} - {{ item.message }}

  </li>

</ul>

var example2 = new Vue({

  el: '#example-2',

  data: {

    parentMessage: 'Parent',

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

一个对象的v-for:

<div v-for="(value, key) in object">

  {{ key }}: {{ value }}

</div>

//第三个参数为索引
<div v-for="(value, key, index) in object">

{{ index }}. {{ key }}: {{ value }}

</div>

key:

<div v-for="item in items" :key="item.id">

  <!-- 内容 -->

</div>

//v-bind 来绑定唯一动态值，用来响应数据项的顺序改变等

数组更新检测：

//变异方法，会改变被这些方法调用的原始数组，会观察数组，触发视图更新

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

//替换数组：返回一个新数组，如filter(), concat() 和 slice()

example1.items = example1.items.filter(function (item) {

  return item.message.match(/Foo/)

})

数组检测注意事项：

？是不适当的做法，+是替代方案;

？ 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

+Vue.set(example1.items, indexOfItem, newValue)

+example1.items.splice(indexOfItem, , newValue)

//splice返回的是含有被删除的元素的新数组

？ 当你修改数组的长度时，例如：vm.items.length = newLength

+example1.items.splice(newLength)

对象检测注意事项：

//对于已经创建的实例，Vue 不能动态添加根级别的响应式属性

//使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

var vm = new Vue({

  data: {

    userProfile: {

      name: 'Anika'

    }

  }

})

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

//vm.$set 实例方法，它只是全局 Vue.set 的别名

this.$set(this.userProfile, 'age', )

//赋多个属性，使用Object.assign或者_.extend()时，组合成一个新对象

this.userProfile = Object.assign({}, this.userProfile, {

  age: ,

  favoriteColor: 'Vue Green'

})

过滤、排序

//不实际改变或重置原始数据,可以创建返回过滤或排序数组的计算属性。

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

data: {

  numbers: [ , , , ,  ]

},

computed: {

  evenNumbers: function () {//返回偶数

    return this.numbers.filter(function (number) {

      return number %  ===

    })

  }

}

//或者，一个method();

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

data: {

  numbers: [ , , , ,  ]

},

methods: {

  even: function (numbers) {

    return numbers.filter(function (number) {

      return number %  ===

    })

  }

}

v-for 渲染多个元素

<ul>

  <template v-for="item in items">

    <li>{{ item.msg }}</li>

    <li class="divider"></li>

  </template>

</ul>

v-for与v-if在同一个元素上时，v-for的优先级更高

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

  {{ todo }}

</li>
//每个循环中都会调用v-if

一个组件的v-for

<my-component

  v-for="(item, index) in items"

  v-bind:item="item"

  v-bind:index="index"

  v-bind:key="item.id"

></my-component>

//key是必需项

为了传递迭代数据到组件里，我们要用 props

Vue.component('todo-item', {

  template: '\

    <li>\

      {{ title }}\

      <button v-on:click="$emit(\'remove\')">X</button>\

    </li>\

  ',

  props: ['title']

})

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