vue 1.x 상호작용 바 이 두 드 롭 다운 목록 예제 실현
vue 자체 가 상호작용 을 지원 하지 않 습 니 다.상호작용 을 하려 면 ajax 모듈 을 도입 해 야 합 니 다.vue 팀 은 vue-resource.js 라 는 새로운 라 이브 러 리 파일 을 제공 합 니 다.
네트워크 CDN:https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js
1.용법 분류
ajax 인 터 랙 션 은 보통 3 가지 유형,get,post,jsonp 로 나 뉜 다.
html 부분의 코드:배열 my Data 의 데 이 터 는 ul 목록 을 통 해 표시 되 며,"v-for"명령 을 사용 합 니 다.
<body>
<div id="box">
<input type="text" value="" v-model="m" @keyup="get()">
{{m}}<br/>
{{msg}}<br/>
{{'welcome'|uppercase}}
<ul>
<li v-for="value in myData">
{{value}}
</li>
</ul>
<p v-show="myData.length == 0"> </p>
</div>
</body>
methods:{
get: function(){
this.$http.get('search',{
wd:this.m
}).then(function(res){
this. myData= res.body
},function(res){
console.log(res.status)
})
}
}
methods:{get : function () {
this.$http.post('search',{
wd:this.m
},{
emulateJSON:true, // get 3
}).then(function(res){
this.myData=res.body;
},function(res){
console.log('err---');
// alert(2)
//this.myData = ['aaa', 'a111', 'a222'];
})
}}
키워드"a"를 입력 한 후 정지점 에 들 어가 데 이 터 를 가 져 옵 니 다:
3)jsonp 는 도 메 인 간 요청 을 보 낼 수 있 습 니 다.많이 사용 하지 않 습 니 다.여기 서 군말 하지 않 습 니 다.
2.요약:
이 글 은 get 과 post 가 요청 한 쓰기,v-model 양 방향 바 인 딩 데 이 터 를 파악 하고 목록 에서 v-for 를 사용 하여 배열 의 데 이 터 를 표시 합 니 다.v-show 뒤 연결 조건 으로 데이터 표시 여 부 를 제어 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
