<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组和对象的操作方法</title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myApp">
<ul>
<li v-for="item in userList">
{{item.name}}:{{item.age}}
</li>
</ul>
<button @click="changeArr()">点击改变数组里的值</button>
<!--对象-->
<dl v-for="(v,k) in userObj">
<dt>{{k}}:{{v}}</dt>
</dl>
<button @click="changeObj()">点击改变对象里的值</button>
<button @click="removeObj()">点击删除对象里的键值</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#myApp",
data:{
userList:[{name:"斌斌",age:"18"},{name:"航航",age:"20"}],
userObj:{name:"兵兵",age:"25"}
},
methods:{
changeArr:function(){
this.userList[0].age=23;
this.userList[1]={
name:"航航222",
age:"22"
}
},
changeObj:function(){
//追加
// this.userObj.gender="男";//属性值已追加但是没有响应到view层
//对象实时响应到view层需要这样写
//对象单个追加
// Vue.set(this.userObj,"gender","男");
//这个也可以追加
// this.$set(this.userObj,"gender","女");
//多个追加 需要重置一下
this.userObj = Object.assign({},this.userObj,{
gender:"男",
weight:"150",
high:"140"
});
console.log(this);
},
removeObj:function(){
// delete this.userObj.name; 删除了,但是未响应到view层
//以下这两种都可以删
// Vue.delete(this.userObj,"name");
//原型的方法
this.$delete(this.userObj,"name");
console.log(vm);
}
}
});
</script>
</html>