Vue 전단 고 효율 개발 목록 렌 더 링 명령
목록 을 말 할 때 순환 을 꺼 내야 합 니 다.v-for 명령 은 vue 에서 순환 을 실현 할 수 있 는 작업 입 니 다.
v-for 명령 은 하나의 배열 을 기반 으로 렌 더 링 을 반복 하 는 명령 으로 목록 과 표를 표시 하 는 데 사 용 됩 니 다.
문법:
- {{색인}}:{{값}:{{키}}
예:
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
</style>
<!-- -->
<div id="app">
<!--item： -->
<!--value： -->
<!--index： -->
<ul v-for="(item,value,index) in people">
<li>{{index}}:{{value}}:{{item}}</li>
</ul>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
text: " ！",
arr: [" ", " ", " ", " ", " "],
people: {
id: 1,
name: " ",
age: 65
}
}
})
</script>
</body>
계산 속성
일반적으로 프로젝트 개발 에서 데 이 터 는 일부 처 리 를 거 쳐 야 한다.기본 적 인 표현 식 과 필 터 를 이용 하 는 것 을 제외 하고 vue 의 계산 속성,최적화 프로그램 과 복잡 한 계산 을 완성 할 수 있다.
예:모호 한 선별 과 증가,삭 제 를 실현 합 니 다.
우선 v-for 문 구 를 통 해 표 에 데 이 터 를 표시 합 니 다.
<table class="table table-hover table-border">
<tr class="info">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="item in lists">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age+" "}}</td>
<td>{{item.show}}</td>
</tr>
</table>
<script>
new Vue({
el: "#app",
data: {
"lists": [{
"id": 1,
"name": " ",
"age": 18,
"show": " "
}, {
"id": 2,
"name": " ",
"age": 19,
"show": " "
}, {
"id": 3,
"name": " ",
"age": 20,
"show": " "
}, {
"id": 4,
"name": " ",
"age": 21,
"show": " "
}, {
"id": 5,
"name": " ",
"age": 22,
"show": " "
}]
}
</script>
<p><input type="text" v-model="selectkey" placeholder=" "></p>
computed: {
newlist: function() {
var _this = this;
return _this.lists.filter(function(val) {
return val.name.indexOf(_this.selectkey) != -1;
})
}
}
추가 및 삭제 실현
<p class="input-group">
<span class="input-group-addon"> ：</span>
<input type="text" v-model="id" placeholder=" " class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon"> ：</span>
<input type="text" v-model="name" placeholder=" " class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon"> ：</span>
<input type="text" v-model="age" placeholder=" " class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon"> ：</span>
<input type="text" v-model="show" placeholder=" " class="form-control">
</p>
<p class="input-group">
<button @click="add()" class="btn btn-primary"> </button>
</p>
<td>
<button v-on:click="dels(item.id)" class="btn btn-primary"> </button>
</td>
methods: {
add: function() {
var girl = {
"id": this.id,
"name": this.name,
"age": this.age,
"show": this.show
}
this.lists.push(girl);
},
dels: function(o) {
// ，
for (let i = 0; i < this.lists.length; i++) {
if (this.lists[i].id == o) {
this.lists.splice(i, 1);
}
}
}
}
추가 란 push 방법 으로 추가 하 는 것 입 니 다.여기 있 는 splice 를 삭제 하 는 방법 은 아래 표 시 를 통 해 만 삭제 할 수 있 습 니 다.전 달 된 값 은 id 이기 때문에 정확성 을 확보 하기 위해 서 는 아래 표 시 를 순환 적 으로 판단 하여 삭제 작업 을 해 야 합 니 다.
이것 이 바로 계산 속성 이다.데이터 처리 에 사용 합 니 다.
감청 속성
vue 는 속성 을 계산 하 는 것 외 에 감청 속성 을 제공 하여 데 이 터 를 처리 하고 데이터 변동 을 관찰 하 는 데 사용 합 니 다.
다른 것 은 감청 속성 은 두 개의 형 삼 이 필요 하 다 는 것 이다.하 나 는 현재 값 이 고 하 나 는 업 데 이 트 된 값 이다.
예:
watch: {
first: function (val) {
this.full = val + ' ' + this.last
},
last: function (val) {
this.full = this.first + ' ' + val
}
}
총결산
Vue 전단 의 효율 적 인 개발 목록 렌 더 링 명령 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
