[Vue.js] Vue에서 스타일 삼항연산자만 사용한다구요? js 삼항연산자도 사용할 수 있음ლ|'ー'ლ|


내가 수학을 잘했던건 아니지만… (내 죽기전에 무슨일이있어도 수학을 잘하고 죽을테다)

그래도 삼항연산자라는걸 알고나서 참 편하길래 자주 쓰곤 하는데,

특히 vue에서 삼항연산자를 쓰면 정말 편하다는걸 많이 느낀다

style에 관련된것들을 자주 쓰곤 한다.

예를 들어 뭐

<div :style="[변수 == 1 ? {border:'#ff0000'} : {color:'#000000'}]"></div>

뭐 이런식으로 많이 쓰곤하는데,

JS를 쓰면 정말 좋겠다 하는 부분이 나타났다…!

바닐라 js에서 삼항연산자를 쓰다보면

function canDrinkAlcohol(age) {
  return (age > 21) ? "True, over 21" : "False, under 21";
}
var output = canDrinkAlcohol(26);
console.log(output); // "True, over 21"

-출처 MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

이렇게 쓰곤하는데

vue에서 이거 어떻게 연동을 해서 써야하나 ( •́ ̯•̀ )

또 나의 구루 스택오버플로우를 뒤지고 뒤져서 찾아내따아

<div v-on="test == '1' ? {click:() => {funtion1();function2();}} : {click:() => {} }"></div>

vue에서 on으로 받아주면 된다.

그리고 js라서 이벤트명을 적어야한다.

사실 클릭이벤트만 해봐서 다른 이벤트들도 되는지 확인은 못해봤지만

안될 이유가 없어 분명 될거라고 생각하는 즁….ㅎㅎㅎㅎㅎㅎㅎ

test가 ‘1’이면 클릭했을때 funtion1, funtion2를 실행하고 아니면 클릭해도 아무것도 하지 마라. 라는 뜻인데…

너무 편해 증말 편해

vue쓰시는분들은 기회되면 꼭 써보시길 ㅎㅎㅎ




© 2018. by sora

Powered by sora