<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue修改數組元素方法</title>
</head>
<body>
<div id="root">
<div v-for="item in arr">
{{ item }}
</div>
<button @click="changeArr1">修改數組元素方法--方法一</button>
<button @click="changeArr2">修改數組元素方法--方法二</button>
<button @click="changeArr3">修改數組元素方法--方法三</button>
<button @click="getTheArr">獲取數組元素</button>
<button @click="getTheNewArr">獲取新數組元素</button>
<button @click="addUserObj">增加/修改對象元素</button>
<button @click="delUserObj">刪除對象元素</button>
<button @click="updateUserObj">修改/增加對象元素</button>
<button @click="printUserObj">打印對象元素</button>
<button @click="addUserArr">增加數組元素</button>
<button @click="delUserArr">刪除數組元素</button>
<br>//遍歷數組：
<div v-for="(v, k, index) in user">
<p>
uid: {{k}},
avatar: {{v.avatar}},
nick: {{v.nick}}
</p>
</div>
<div v-for="item in user">
{{item.nick}}——{{item.avatar}}
</div>
點一次顯示一個頭像
<div></div>>
</div>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
arr: [1, 2, 3],
user: {
"1": {
"avatar": "xxx.xx/1.png",
"nick": "你爹"
},
"2": {
"avatar": "xxx.xx/2.png",
"nick": "你爺"
},
}
},
methods: {
changeArr1: function() {
Vue.set(vm.arr, 0, '方法一');
},
changeArr2: function() {
vm.$set(vm.arr, 0, '方法二');
},
changeArr3: function() {
this.arr.splice(0, 1, '方法三');
//vm.arr.splice(0,1,'方法三');
},
//獲取元素
getTheArr: function() {
console.log(this.arr[0]);
},
//獲取元素
getTheNewArr: function() {
console.log(this.user["1"]["avatar"]);
},
//給對象增加元素
addUserObj: function() {
console.log(this.user)
Vue.set(this.user, "3", {"avatar":"xxx.xx/3.png","nick":"阿三"})
console.log(this.user);
console.log(this.user["3"]["avatar"]);
},
//刪除對象元素
delUserObj: function() {
//console.log(this.user["1"]["avatar"])
console.log(this.user);
Vue.delete(this.user, "1");
console.log(this.user);
},
updateUserObj: function() {
Vue.set(this.user, "3", {"avatar":"yyy.yy/3.jpg","nick":"三哥"})
},
//給數組添加元素
addUserArr: function() {
this.arr.push("嘿嘿嘿");
console.log(this.arr);
},
//刪除數組中元素
delUserArr: function() {
arrLen = this.arr.length;
Vue.delete(this.arr, arrLen - 1);
console.log(this.arr);
},
//在js中遍歷vue的data中的內容
printUserObj: function() {
for (let key in this.user) {
console.log(key, this.user[key]["nick"], this.user[key]["avatar"]);
}
}
}
});
</script>
</body>
</html>
vue對對象、數組的增、刪、改、查
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
element-ui中的el-table-column加v-if不生效，表頭錯亂
項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"
Html Webpack Plugin: ReferenceError: process is not defined
修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>