vue - style, class , @, : 약어 , v-model 등

김윤철·2022년 12월 12일

오늘은 css 부분을 공부했다.

이전에 v-bind 는 : 로, v-on은 @로 배우는 약어를 익혔으니 적극 사용해 보기로 했다.

특히 v-model을 이용한 css를 배웠는데 배우다 보니 React의 styled-component와 비슷한 부분이 많은 것 같다고 느꼈다.

sytled-component를 쓰면서 가장 좋았던 부분이 props를 통한 함수 사용이었는데, 이번 강의에서 비슷한 부분을 많이 느꼈다.

토글버튼을 클릭해서 visible, hidden을 구현하는 예제와 backgroundColor에 v-model을 이용하여 내가 원하는 색깔을 입력하면 그 색으로 배경이 변하는 예제이다.

html


  <body>
    <header>
      <h1>Vue Styling</h1>
    </header>
    <section id="assignment">
      <!-- 1) Fetch the user input and use it as a CSS class -->
      <!-- The entered class should be added to the below paragraph -->
      <input type="text" v-model="inputClass" />

      <p :class="combineClass">Style me!</p>
      <button @click="toggles">Toggle Paragraph</button>
      
     
      <input type="text" v-model="colorClass" />
      
      <input type="text" v-on:keyup.enter="yourName" />
      <p>Your name : {{ yourNames }}</p>
      <p
        :style="{backgroundColor: colorClass}
        "
      >
        Style me inline!
      </p>
    </section>
  </body>
</html>

const app = Vue.createApp({
  data() {
    return {
      inputClass: "",
      toggledd: true,
      yourNames: "",
      colorClass: "",
    };
  },
  computed: {
    combineClass() {
      return {
        user1: this.inputClass === "user1",
        user2: this.inputClass === "user2",
        visible: this.toggledd,
        hidden: !this.toggledd,
      };
    },
  },
  methods: {
    toggles() {
      this.toggledd = !this.toggledd;
    },
    yourName(event) {
      this.yourNames = event.target.value;
    },
  },
});

app.mount("#assignment");

(혼자 공부 하다가 저번에 했던 것을 복습하려고 input의 값을 @keydown.enter로 받아오는 것도 추가함)