filter 함수

특정 조건하에서 수조의 내용을 축소하는 방법.

配列.filter
(絞り込む関数（変数)        //←この変数は配列を一つ一つ取り出した要素が入る
{絞り込み処理})           //上の行の「絞り込む関数」でこの行の「絞り込み処理」を呼び出している

이번 주제: 배열을 아이에게 맡겨 데이터를 판별하다

Vue.프로프스에 대한 이야기 부자 구성 요소의 줄거리를 묘사했다.
이번에 우리는 플로프스의 데이터를 배열했다
나는 분류별로 데이터를 받아들이고 싶다.

상위 어셈블리 준비

이번에는 아이에게 사용을 부탁해서 쇼핑 리스트를 작성합니다.
쇼핑 리스트에 살 물건의 이름과 매장을 표시하는 category이 추가됐다.
Parent.vue

<template>
<Child :list = list></Child>
</template>
<script>
    import Child from "../components/Child";
    export default {
        components:{Child},
        data(){ 
            return{
                list:[
                    {name:"りんご",category:"果物"},
                    {name:"砂糖",category: "調味料"},
                    {name:"いちご",category:"果物"}
                ]
            }
        }
    }
</script>

서브어셈블리 준비

여러 개의 물건이 열거되어 있기 때문이다.이번Array에 수령합니다.
받은 명세서로 가게에 있는 사람에게 "제 ь"를 알려 주세요.
Child.vue

<!--Parent.vueの子コンポーネント-->
<template>
    <div>
        {{lists[0].name}}ください

    </div>
</template>
<script>
export default {
    components:{},
    data:function(){
        return{}
    },
    props:{
        lists:{type:Array}
    }
}
</script>

v-for="변수 in 배열"

v-forforeach문 같은 것이다.v-bind에서 키를 설정해야 합니다.
두 번째 매개 변수로 수조의 인덱스를 수신할 수 있습니다.
구분 문자in는 일 수 있습니다of.
v-for가 지정한 요소 중에서 배열된 내용을 추출하여 각각 처리한다.
중복되고 싶지 않은 것은 요소 밖으로 내버려 두어라.
Child.vue

        スーパーにて、
        <div v-for="list in lists" v-bind:key="list.name">   //v-bindは省略できるので、:key=とも書くことができる。
            {{list.name}}ください
        </div>

슈퍼마켓이라면 위의 코드가 모두 갖추어져 있다
나는 지금 과일 가게에서 과일만 고르고 있다. "주세요."라고 말하고 싶다.

다시 filter 함수

配列.filter
(絞り込む関数（変数)       
{絞り込み処理})

이번에는 과일만 고르고 싶어요.
Child.vue

<script>
    computed:{
        fruits:function () {              //fruitsがfilter関数でピックアップしたものだけが入る変数
            return this.lists.filter(    //配列listsからfilter関数で値を返してください
                function (value) {       //valueを使ってfunctionという処理を行う。valueはlists）（配列）を一つ一つバラバラにしたものです
                    return value.category ==="果物"   //valueのcategoryが"果物"と完全一致したものだけを返します
                }
</script>

상기 코드에 배열된 category 중 lists만 과일이 들어간 경우category.

겸사겸사 말씀드리다

computed(계산 속성)는method와 같지만 매번method를 처리합니다.
데이터가 바뀌면computed를 처리합니다.