Vue循环渲染（v |
您所在的位置：网站首页 › 无刷电机怎么接电源 › Vue循环渲染（v |
|
1.v-for基本用法
DOCTYPE html>
v-for 指令
--索引值--{{i}} --每一项--{{item}}
--索引值--{{i}}--id--{{item.id}} --姓名--{{item.name}}
--索引值--{{i}}--键是--{{key}} --值是--{{val}}
这是第{{count}}次循环
var app = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5],
listObj: [{
id: 1,
name: 'zs1'
},
{
id: 2,
name: 'zs2'
},
{
id: 3,
name: 'zs3'
},
{
id: 4,
name: 'zs4'
},
{
id: 5,
name: 'zs5'
},
],
user: {
id: 1,
name: '小明',
gender: '男',
age: '18',
classname: 'A1631'
}
}
})
2.v-for为什么要加key 先看示例 DOCTYPE html> v-for 指令 添加 {{item.name}} {{item.name}} var app = new Vue({ el: "#app", data: { name: '', newId: 3, list: [{ id: 1, name: 'xt1' }, { id: 2, name: 'xt2' }, { id: 3, name: 'xt3' }, ], }, methods: { add() { //注意这里是unshift this.list.unshift({ id: ++this.newId, name: this.name }) this.name = '' } }, });没有key时，当选中xt2时，添加xt后选中的却是xt1，并不是我们想要的结果；有key时，当选中xt2时，添加xt后依旧选中的是xt2，是我们想要的结果。 vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用，增加Key可以标识组件的唯一性。 3.v-if 与 v-for 一起使用 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。 有数据时显示循环列表，没有数据时显示暂无数据。 DOCTYPE html> v-for 指令 {{ todo.name }} 暂时没有数据 var app = new Vue({ el: "#app", data: { todos: [{ id: 1, name: '列表1' }, { id: 2, name: '列表2' }, { id: 3, name: '列表3' }, ], }, });
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |