7. 조건부 랜더링

by donggyu04

HTML

<div id="app">
  <button @click="isGrootAlive = !isGrootAlive">toggle</button>
  <h1 v-if="isGrootAlive">I'm Groot!</h1>
  <h1 v-else>I'm Tanos!</h1>
  
  <textarea :class="{ warn: longText }" v-model="memo" :maxLength="limit"></textarea>

  <div :class="classes"></div>
  
  <button @click="toggleDisplay">show Toggle</button>
  <div :style="{ display: isShow }">hello world</div>
</div>

CSS

textarea {
  width: 400px;
  height: 200px;
}

.warn {
  background-color: mistyrose;
}

.default {
  width: 100px;
  height: 50px;
}

Vue

new Vue({
	el: '#app',
  data: {
  	isGrootAlive: false,
    limit: 30,
    memo: '',
    isShow: 'block',
  },
  methods: {
  	toggleDisplay() {
    	this.isShow = this.isShow === 'block' ? 'none' : 'block';
    },
  },
  computed: {
  	longText() {
    	return this.memo.length >= this.limit;
    },
    classes() {
    	return {
      	warn: true,
        default: true,
      }
    },
  },
});