VUE 배열 업데이트 에 대한 자세 한 설명
(1)원수 그룹 변경
push
pop
unshift
shift
reverse
sort
splice
(2)원래 배열 이 변 하지 않 고 새 배열 생 성
slice
concat
filter
원 배열 을 변화 시 키 는 방법 에 대해 서 는 보 기 를 직접 업데이트 할 수 있 습 니 다.
원 배열 이 변 하지 않 는 방법 에 대해 서 는 새로운 배열 로 원래 의 배열 을 교체 하여 보 기 를 변화 시 킬 수 있 습 니 다.
예제 코드:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue </title>
</head>
<body>
<div id="app">
<ul>
<template v-for="book in books">
<li> ：{{book.name}}</li>
<li> ：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js ',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
//
//app.books.push({name: 'c++',author: 'd'});
//
app.books = app.books.concat([{name: 'c++',author: 'd'}]);
</script>
</body>
</html>(1)색인 을 통 해 항목 을 직접 설정 합 니 다.
(2)배열 길 이 를 수정 합 니 다.app.books.length=1.
원래 배열 을 바 꾸 지 않 으 려 면 계산 속성 을 사용 하여 배열 을 걸 러 낼 수 있 습 니 다.예 를 들 어:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue </title>
</head>
<body>
<div id="app">
<ul>
<template v-for="book in filterBooks">
<li> ：{{book.name}}</li>
<li> ：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js 111',
author: 'b'
},
{
name: 'java33333',
author: 'c'
}
]
},
computed:{
filterBooks:function(){
return this.books.sort(function(a,b){
return a.name.length>b.name.length?1:-1
})
}
}
});
</script>
</body>
</html>1)변화 추적 방법
모든 구성 요소 인 스 턴 스 는 해당 하 는 watcher 인 스 턴 스 대상 이 있 습 니 다.구성 요소 가 렌 더 링 하 는 과정 에서 속성 을 의존 으로 기록 한 다음 의존 항목 의 setter 가 호출 될 때 watcher 에 게 다시 계산 하 라 고 알려 주 고 관련 구성 요 소 를 업데이트 합 니 다.
2)변화 검출 문제
현대 자 바스 크 립 트 의 제한(및 Object.observe 폐기)으로 인해 Vue 는 대상 속성의 추가 나 삭 제 를 감지 할 수 없습니다.Vue 는 인 스 턴 스 를 초기 화 할 때 속성 에 대해 getter/setter 전환 과정 을 실행 하기 때문에 속성 은 data 대상 에 존재 해 야 Vue 를 변환 할 수 있 습 니 다.그래 야 응답 할 수 있 습 니 다.예 를 들 면:
var vm = new Vue({
data:{
a:1
}
})
// `vm.a`
vm.b = 2
// `vm.b`
Vue.set(vm.someObject, 'b', 2)
var _this=this
for (var i = 0; i <this.imgLen;i++) {
if(_this.userImgsh[i] === ' ') continue;
_this.$set(_this.userImgsh, i, ' ');
}위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 상세 한 VUE 배열 업데이트 문제 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
