js 를 이용 하여 Vue 2.0 데이터 의 양 방향 연결 기능 을 실현 합 니 다.

Object.defineProperty 이해
문법:
Object.defineProperty(obj, prop, descriptor)

obj 속성 을 정의 할 대상 입 니 다.

prop 가 정의 하거나 수정 할 속성의 이름

descriptor 가 정의 하거나 수정 할 속성 설명자

obj 와 prop 는 우리 가 변 수 를 정의 하 는 것 을 잘 이해 합 니 다.


const o = {
    name:'xbhog'
}

그 중에서 obj 는 o 를 말 합 니 다.prop 은 o.name 을 말 합 니 다.다음은 descriptor 를 살 펴 보 겠 습 니 다.
descriptor 대상 속성의 일부 특징(대상 입 니 다)
   descriptor 아래 6 개의 인자 가 있 습 니 다.
인자 1:
     value:속성 값
인자 2:
writable:대상 속성 값 을 수정 할 수 있 습 니까? true 허용 false 허용 하지 않 음
인자 3:
configurable:대상 속성 을 삭제 할 수 있 는 지 true 허용 false 허용 하지 않 음
인자 4:
enumerable:대상 속성 을 매 거 할 수 있 습 니까?
인자 5:
     get():함수 입 니 다.이 속성 에 접근 할 때 함수 가 자동 으로 호출 됩 니 다.함수 반환 값 은 이 속성의 값 입 니 다.
인자 6:
     set():함수 입 니 다.이 속성 을 수정 할 때 함수 가 자동 으로 호출 되 고 함수 가 있 으 며 매개 변수 만 있 습 니 다.값 을 부여 하 는 새로운 값 입 니 다.
메모:설명 문자 의 value 속성 writable 속성 과 get 속성 set 속성 은 서로 배척 하 는 관계 입 니 다.하나만 존재 할 수 있 습 니 다.
선행 지식 을 알 게 되 었 습 니 다.Vue 의 v-model 의 양 방향 연결 을 실현 합 니 다.
구현 코드 먼저 보기:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  js         </title>
</head>
<body>
    
<input type="text"/><br>
<h1>  ：<span>    </span></h1>


<!--   js          -->
<script>
	//                          HTMLElement  
    var ipt =document.querySelector('input');
    var p = document.querySelector('span');
	
	
    var data = {name:""};
	/* 
	    oninput           。
	         <input>   <textarea>            。
	 */
    ipt.oninput = function(){
	//  ipt.value     data.name value
        data.name = ipt.value;
    }
    //  ipt.value
    Object.defineProperty(data,"name",{
    //     
    get(){
        return ipt.value;  //         get  
    },
    //     
	//name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

우선 document.query Selector 를 통 해 input 및 span 태그 의 Html 대상 을 가 져 옵 니 다.data 대상 을 정의 할 때 속성 name 이 비어 있 습 니 다.
이벤트 감청 oninput 을 사용 하여 사용자 의 입력 을 감청 합 니 다(이 이 벤트 는또는

요소 의 값 이 바 뀌 었 을 때 촉발 합 니 다). ipt.value 의 값 을 data.name 의 value 에 전달 하기;<pre><code>
data.name = ipt.value;
</code></pre>Object.defineProperty 를 이용 하여 사용자 가 입력 한 데 이 터 를 납치 합 니 다.<li>get 속성:함수 입 니 다.이 속성 에 접근 할 때 함수 가 자동 으로 호출 됩 니 다.함수 반환 값 은 이 속성의 값</li>입 니 다.<li>set 속성:함수 입 니 다.이 속성 을 수정 할 때 함수 가 자동 으로 호출 되 고 함수 가 있 으 며 매개 변수 만 있 습 니 다.값 을 부여 하 는 새로운 값 입 니 다. </li> <pre><code>
Object.defineProperty(data,"name",{
 // 数据订阅
 get(){
 return ipt.value; //当访问data.name时候会调用get方法，调用ipt.value获取当前value的值
 },
 // 数据劫持
 set(value) { //设置数据的时候会自动调用set方法
 p.innerHTML = value;
 ipt.value = value;
 }
</code></pre>효과 가 비교적 뚜렷 하 다. set 방법: <img alt="" src="https://s1.md5.ltd/image/1acabce40ff57e4d76cc3b140680eba4.png" class="ways1_mod"/> get 방법: <img alt="" src="https://s1.md5.ltd/image/bb952d9147f1fc595ce0910b4fe8d10e.png" class="ways1_mod"/> 마지막 실현 효과: <img alt="" src="https://s1.md5.ltd/image/d14253e6e9b449d1d37673d58ea4f2fa.png" class="ways1_mod"/> 참고 자료:<li> https://blog.csdn.net/Doulvme/article/details/107978012 </li> <li> https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector </li> <li> https://www.jianshu.com/p/6f589af16ad4 </li> <li>(추천)<a rel="noreferrer noopener nofollow" href="https://www.jb51.net/www.jb51.net/article/217657.htm">//www.jb51.net/article/217657.htm</a>(추천) 총결산 js 를 이용 하여 Vue 2.0 의 데이터 양 방향 바 인 딩 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 가 Vue 2 양 방향 바 인 딩 내용 을 실현 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

vue2.0 마우스 바인딩 이동 이벤트 - 바인딩class

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 를 이용 하여 Vue 2.0 데이터 의 양 방향 연결 기능 을 실현 합 니 다.

좋은 웹페이지 즐겨찾기