뷰 모두 선택하고 선택 없음

HTML 코드 :

<스크립트 SRC = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> </ script>
<DIV 아이디 = "응용 프로그램">
    <p>
        선택 :
    </ p>
    <input 타입 = "체크 박스"는 ID = "체크 박스"V-모델 = "changeAllChecked ()"를 변경 @ "체크"=>
    <라벨 에 대한 = "체크 박스">
        {{확인}
    </ 라벨>
    <p>
        여러 확인란 :
    </ p>
    <input 타입 = "체크 박스"ID = 값은 = "Runoob"V-모델 = "checkedNames"를 "runoob">
    <라벨 용 = "runoob">
        Runoob
    </ 라벨>
    <input 타입 = "체크 박스"ID =이 값 = "구글"V 모델 = "checkedNames"을 "구글">
    <라벨 용 = "구글">
        구글
    </ 라벨>
    <input 타입 = "체크 박스"ID = "Taobao의"값 = "Taobao의"V-모델 = "checkedNames">
    <라벨 용 = "Taobao의">
        Taobao의
    </ 라벨>
    로 <br>
    <SPAN>
        선택된 값은 {{}} checkedNames
    </ SPAN>
</ DIV>

뷰 코드 :

새로운 보기 ({
    에 : '#app' ,
    데이터 : {
        확인 : 거짓 ,
        checkedNames [],
        checkedArr : [ "Runoob", "Taobao의", "구글" ]
    },
    방법 : {
        changeAllChecked : 함수 () {
             경우 ( 이 .checked를) {
                 이 .checkedNames = 이 .checkedArr
            } 다른 { 이 .checkedNames = []
            }
        }
    },
    손목 시계: {
        "checkedNames" 함수 () {
             경우 ( 이 .checkedNames.length == 이 .checkedArr.length) {
                 이 .checked를 = 참 
            } 다른 {
                 이 .checked를 = 거짓
            }
        }
    }
})

참조 주소 코드는 다음과 같습니다 https://c.runoob.com/codedemo/3870  이 효과는

　　이해하기 가장 어려운 내부 코드의이 작품은 셋톱 박스가 선택된 경우의 시간에 해당하는 미리 정의 된 값을 가지고 내부의 전체 선거, 주로 checkedArr이 값 checkedArr이 checkedNames을 준 것 때문에 왜 다음 값이 동시에되는 값 이상의 데이터 값의 내부 상자의 내부는,이 자동으로 선택 될 때 셋톱 박스와 CheckedNames 관계가 결합된다. 당신이 믿지 않는 경우에, 당신은 내부의 체크 박스의 값보다 높은 값으로 변경할 수 있으며,뿐만 아니라 다음에 해당하는 배열이,이 선택되지 않습니다 내부.

　　본원에 사용되는 시간 값이 변경되어, 듣기 checkedNames 선택하지 동일한 길이 다음 동작은 모니터 데이터를보고 할 필요가있다. 이 같은 선거의 전체 길이를 의미하는 경우,