v-for
当需要遍历数组或枚举一个对象属性循环显示时 就会用到列表渲染属性 v-for
使用场景：①遍历多个对象 ②遍历一个对象的多个使用场景
'遍历多个对象'
<body>
<div id="demo">
<ul>
<li v-for="musicName in musicList"> {{musicName.name}}</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
musicList:[
{name:'ヤキモチ'},
{name:'山鬼'},
{name:'Pop 2016 Mashup'},
{name:'Soaring (Original Mix) '}
]
}
})
</script>
复制代码带索引的写法 每个LI前边会有数字标号
<li v-for="(musicName,index) in musicList">{{index}}.{{musicName.name}}</li>
输出结果
1 xxxx
2 xxxxx
3 xxxxxx
复制代码除了遍历对象还可以遍历一个对象的多个属性
<div id="demo">
<span v-for="value in singer">{{value}}</span>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
singer:{
singer1:' TomLeevis',
singer2:'DJ Drybones',
singer3:'Deepjack'
}
}
})
复制代码拿到 key index （vki）
<body>
<div id="demo">
<span v-for="(value,key,index) in singer">{{index}}+++++{{key}}+++++{{value}}</span>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
singer:{
singer1:' TomLeevis',
singer2:'DJ Drybones',
singer3:'Deepjack'
}
}
})
</script>
复制代码数组更新
<body>
<div id="demo">
<ul>
<li v-for="study in arr">{{study}}</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
arr:['book','pen','pencil']
}
})
</script>
复制代码app.arr.push('push') 向数组的末尾添加一个push 并且面会重新渲染
app.arr.pop() 把数组的最后一个元素移除 图中最后一项是push
app.arr.shift() 删除数组的第一个元素
app.arr.unshift("music") 像数组头部添加 music 并返回最新的数组长度
app.arr.splice(开始操作的位置,要操作的长度,第三个可选参数) 可以添加或删除函数
- 删除操作
- 替换操作 原本再位置1的penil 背题换成了 flex
- 添加操作 在数组末尾添加新的值
.sort() 排序
- 例如按数组成员长度排
<body>
<div id="demo">
<ul>
<li v-for="study in arr">{{study}}</li>
</ul>
<button @click="sort">排序</button>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
arr:['book','pen','pencil']
},
methods:{
sort:function(){
this.arr.sort(function(a,b){
return a.length - b.length
})
}
}
})
</script>
复制代码reverse.() 反转 下面的例子是 根据数组值的长度排序 与 翻转
<body>
<div id="demo">
<ul>
<li v-for="study in arr">{{study}}</li>
</ul>
<button @click="sort">排序</button>
<button @click="reverseArr">翻转</button>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
arr:['book','pen','pencil']
},
methods:{
sort:function(){
this.arr.sort(function(a,b){
console.log(a)
console.log(b)
return a.length - b.length
})
},
reverseArr:function(){
return app.arr.reverse()
}
}
})
</script>
复制代码刺头 改变数组的指定项 改变数组的长度
- 下面方法改变数组长度 与 指定项都不会生效
- BUT Vue中提供了set方法 Vue.set(要处理的数组,index,'要添加的值')
改变数组的长度 用splice 例子数组共有三项
- 操作数组长度变为 0
- 操作数组长度变为 1
过滤
方法与事件
方法中带有参数 调用的时候记得加括号
不然就出现