vue element 循环Rate评分使用绑定指定 vue中循环

转载

mob6454cc7ccdfc 2024-05-25 11:01:16

1、vue.js中的循环结构（列表渲染:for）如何使用？
v-for
用于循环的数组里面的值可以是对象，也可以是普通元素

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：

示例：

•  {{ item.message }} 
 var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 结果： 
{% raw %}
{{item.message}}
 {% endraw %}

2、vue.js中的循环结构（列表渲染:for）对普通的for循环的增强有哪些？
$index
在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

•  {{ parentMessage }} - {{ $index }} - {{ item.message }} 
 var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 结果： 
{% raw%}
{{ parentMessage }} - {{ $index }} - {{ item.message }}
 {% endraw %}

另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

{{ index }} {{ item.message }}

3、vue.js中想用循环结构，但是不想给循环出来的东西添加标签，如何操作？
template v-for
类似于 template v-if，也可以将 v-for 用在标签上，以渲染一个包含多个元素的块。例如：

{{ item.msg }}

4、vue.js的循环中，如何动态改变数据源数组里面的内容？
数组变动检测变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

push()
 pop()
 shift()
 unshift()
 splice()
 sort()
 reverse()

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: ‘Baz’ })。

5、vue.js的列表渲染中，修改数据源数组的方法和不修改数据源数组的方法分别有哪些？
变异方法替换数组
变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

push()
 pop()
 shift()
 unshift()
 splice()
 sort()
 reverse()

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: ‘Baz’ })。

替换数组
变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/)
 })

可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。

6、vue.js的列表渲染中，遍历对象和遍历数组有什么区别？
$key
也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。

•  {{ $key }} : {{ value }} 
 new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) 结果： 
{% raw %}
{{ $key }} : {{ value }}
 {% endraw %}

也可以给对象的键提供一个别名：