v-for <template> <div v-for="(item, idx) in cardResult.items" :key="idx" class="card-result"> <base-tag :type="item.tagType" :tag-title="item.tagTitle" /> <div class="card-result_sub"> {{ item.subTitle }} </div> <div class="card-result_subject"> {{ item.title }} </div> <dl class="card-result_status"> <dt> 최근 성향 </dt> <dd> {{ item.status }} </dd> </dl> </div> </template> <script> data() { return { cardResult: { items: [ { tagTitle: '유지', tagType: 'success', subTitle: '8403267890', title: '(무)집중보장메디컬보험(갱신형)', status: '적극 투자형' } ] }, } } </script>
$emit 부모창 <template> <components @btnVal="btnStatus" /> </template> <script> methods: { btnStatus(vlue) { console.log(vlue) } } </script> 자식창(컴포넌트) <template> <button type="button" @click="btnValu()">Btn</button> </template> <script> data() { return { number: 0 } }, methods: { btnValu() { const vlue = this.number this.$emit('btnVal', vlue) }, } </script> 자식창(컴포넌트) <template> <button type="button" @click="btnValu(1)">Btn</button> </template> <script> data() { return { number: 0 } }, methods: { btnValu(idx) { this.$emit('btnVal', idx) }, } </script>
watch 체크된 값 <template> <button type="button" @click="btnValu(1)">Btn</button> </template> <script> data() { return { result: [ { check: false }, { check: false } ] } }, watch: { result: { handler(newVal) { const len = newVal.filter(e => e.check).length console.log(len) }, deep: true } } </script>
splice() splice() 하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가 const removed = myFish.splice(2, 0, 'drum', 'guitar');
숫자 세자리 콤마 찍기 return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',') this.comma(number) this.uncomma(number) <div> {{ number | comma }} </div> <script> data() { number: 200000 }, filters: { // 콤마 찍기 comma(val) { return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',') } }, methods: { // 콤마 찍기 comma(val) { return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }, //콤마 지우기 uncomma(val) { str = String(val); return str.replace(/[^\d]+/g, ''); } } </script>
필터 const len = this.list.filter(e => e.check).length <script> data() { list: [ { check: true }, { check: false }, { check: false } ] }, methods: { // check: true 갯수 chkLen(val) { const len = this.list.filter(e => e.check).length console.log(len) } } </script>
slot 내용 없을시 비노출 return !!this.$slots.cont <div v-if="isExitFooter" slot="cont"> <slot name="cont" /> </div> <script> computed: { isExitFooter() { return !!this.$slots.cont } } </script>