<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 数组元素 of可以代替in作为分隔符-->
<div v-for="(item,index) in list">
{{item.name}}----{{index}}
</div>
<div>-----------------------------</div>
<div v-for="(item,index) of list">
{{item.name}}----{{index}}
</div>
<div>-----------------------------</div>
<!-- 对象迭代三个参数,第一个属性值,第二个属性名称,第三个索引号 -->
<div v-for="(value,name,index) in userInfo">{{name}}---{{value}}---{{index}}</div>
<div>----------------------------</div>
<div v-for="(value,name,index) of userInfo">{{name}}---{{value}}---{{index}}</div>
<div>{{evens}}</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
list: [
{
id: 001,
name: 'html'
},
{
id: 002,
name: 'css'
},
{
id: 003,
name: 'js'
}
],
userInfo: {
name: 'Ann',
age: 20,
sex: 'women'
},
number: [1,2,3,4,5]
},
computed: {
evens(){
return this.number.filter((num)=>{
return num%2==0
})
}
}
})
//vue.js的变异方法: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
//非变异方法:filter(),concat(),slice(),返回一个新数组
//给列表添加新元素
app.list.push({id: 004,name: 'vue.js'})
//复制当前userInfo的所有属性
let obj = Object.assign({},app.userInfo)
console.log(obj)
// {age: 20,name: "Ann",sex: "women"}
//添加多个属性
app.userInfo = Object.assign({},app.userInfo,{
address: 'beijing',
mobile: '11111111111'
})
//修改列表元素
//方法一: Vue.set(vm.prop,index,newValue)
Vue.set(app.list,1,{id: 007,name: 'i is 007'})
//方法二:vm.$set实例方法是Vue.set全局方法的别名
app.$set(app.list,0,{id: 001,name: 'this is 001'})
//修改数组长度 splice(),用于添加删除元素,从下标1开始,删除2个元素
app.list.splice(1,2)
</script>
</body>
</html>