Vue JS로 체크박스 필터를 만드는 방법
9116 단어 javascriptbeginnersvuebootstrap
Click Here - 이 프로젝트의 모든 코드가 포함된 Github 리포지토리를 봅니다.
Click Here codesandbox에서 작업 중인 이 프로젝트의 미리 보기를 봅니다.
vue CLI를 설치하고 새 프로젝트를 스캐폴딩한 후 먼저 이미지에 있는 것과 같이 검은색 배경을 프로젝트에 추가합니다.
public 폴더로 이동하여 index.html 파일을 클릭한 다음 이 작은 스타일 태그를 head 태그에 추가합니다.
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
height: 100%;
background-color: black;
}
</style>
이제 본론으로 들어가겠습니다
이 프로젝트는 4단계로 진행됩니다.
부트스트랩 설치
부트스트랩 설치는 매우 간단하며 노드 패키지 관리자 "npm"으로 설치하는 경우 한 줄의 코드만 필요합니다. 필요한 모든 소스 파일을 자동으로 가져옵니다.
npm install bootstrap
Font Awesome 설치하기
npm i --save @fortawesome/fontawesome-svg-core
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest-3
/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
사용자 인터페이스 구축
이 챌린지의 HTML 마크업 스니펫은 다음과 같습니다. 이 마크업의 중요한 측면은 확인란이 데이터 메서드에서 확인된 배열로 모델링되었다는 것입니다. 확인란을 클릭할 때마다 해당 값은 해당 배열 안에 있습니다.
<template>
<div
class="
container-fluid
d-flex
flex-column
aligns-items-center
justify-content-center
bg-dark
"
>
<div class="row bg-dark border-bottom border-primary border-3">
<div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value="happy"
id="flexCheckDefault"
v-model="checked"
checked
/>
<font-awesome-icon
icon="fa-solid fa-face-grin-wide"
style="color: yellow; font-size: 25px"
/>
</div>
</div>
<div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value="meh"
id="flexCheckDefault"
v-model="checked"
checked
/>
<font-awesome-icon
icon="fa-solid fa-face-meh"
style="color: yellow; font-size: 25px"
/>
</div>
</div>
<div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value="sad"
id="flexCheckDefault"
v-model="checked"
checked
/>
<font-awesome-icon
icon="fa-solid fa-face-frown"
style="color: yellow; font-size: 25px"
/>
</div>
</div>
</div>
<div class="container-fluid" v-for="item in computedItems" :key="item.id">
<div class="row bg-dark p-3">
<div
class="
col-4
text-light
d-flex
aligns-items-center
justify-content-center
"
>
<font-awesome-icon
v-bind="{ icon: item.icon }"
:style="{ fontSize: 25 + 'px', color: item.color }"
/>
</div>
<div
class="
col-4
text-light
d-flex
aligns-items-center
justify-content-center
"
>
<h5>{{item.text}}</h5>
</div>
<div
class="
col-4
text-light
d-flex
aligns-items-center
justify-content-center
"
>
<input
class="
bg-dark
text-light
border border-secondary border-3
rounded
ps-2
"
type="number"
name=""
id=""
:value="item.id"
style="width: 70%"
/>
</div>
</div>
</div>
</div>
</template>
기능 추가
다음은 프로젝트의 스크립트 섹션입니다. 여기에는 기능이 포함되어 있습니다.
가장 먼저 해야 할 일은 부트스트랩을 prioject로 가져오는 것입니다.
// importing bootstrap into the project
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
내보내기 기본 배열 내에서 데이터, 마운트와 같은 다양한 수명 주기 방법을 사용하고 계산된 방법도 사용할 것입니다. 데이터 메서드 내에서 기본적으로 확인되는 항목 및 범주의 배열을 저장합니다.
export default {
name: "App",
components: {},
data() {
return {
checked: [
"happy",
"sad",
],
items: [],
};
},
};
항목 배열은 비어 있으며 마운트된 메서드에서 오기 때문입니다.
mounted() {
this.items = [
{
id: 1,
text: "food",
category: "happy",
icon: "fa-solid fa-burger",
color: "yellow"
},
{
id: 2,
text: "games",
category: "happy",
icon: "fa-solid fa-chess",
color: "purple"
},
{
id: 3,
text: "bills",
category: "sad",
icon: "fa-solid fa-money-bill-1-wave",
color: "green"
},
{
id: 4,
text: "illness",
category: "sad",
icon: "fa-solid fa-bed-pulse",
color: "red"
},
];
},
마지막으로 compute 속성이 있습니다. 여기에 항목 배열을 필터링하는 기능이 있습니다. 여기서 메서드는 항목 배열과 확인된 배열을 기반으로 배열을 반환합니다.
아무 것도 선택하지 않으면(선택한 배열이 비어 있음) 빈 배열을 반환합니다.
확인된 배열에 무언가가 있으면 항목 배열을 필터링하고 확인된 배열에 범주가 있는 항목만 포함합니다.
computed: {
computedItems(){
if (this.checked.length === 0) {
return [];
} else {
return this.items.filter(item =>
this.checked.indexOf(item.category) !== -1
);
}
}
}
Vue JS로 간단한 체크박스 필터링 구성 요소를 만들고 fontawesome으로 멋진 아이콘을 추가하고 부트스트랩으로 스타일을 지정했습니다.
읽어 주셔서 감사합니다
- 세이 사무엘 예미-올로와라비
Reference
이 문제에 관하여(Vue JS로 체크박스 필터를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sammybammy52/how-to-make-checkbox-filter-with-vue-js-be1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
