[뷰(Vue)] CSSGram

// CSSGram

- 클래스 속성만으로 인스타그램 필터를 적용할 수 있는 라이브러리

1. index.html에 cdn을 추가한다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.12/cssgram.min.css" integrity="sha512-kr3JaEexN5V5Br47Lbg4B548Db46ulHRGGwvyZMVjnghW1BKmqIjgEgVHV8D7V+Cbqm/VBgo3Rcbtv+mGLoWXA==" crossorigin="anonymous" />

2. 클래스 속성을 활용하여 필터를 적용한다.

<div :class="필터명"></div>

---

<div :class="a filter-item" :style="`background-image: url(${uploadImage})`" v-for="a in filters" :key="a"></div> 

export default {
    name: 'container',
    data() {
        return {
            filters: [ "aden", "_1977", "brannan", "brooklyn", "clarendon", "earlybird", "gingham", "hudson", 
                    "inkwell", "kelvin", "lark", "lofi", "maven", "mayfair", "moon", "nashville", "perpetua", 
                    "reyes", "rise", "slumber", "stinson", "toaster", "valencia", "walden", "willow", "xpro2"],
        }
    },