8. 원본 HTML 출력하기

by donggyu04

HTML

<div id="app">
  <div> {{ html }}</div>
  <div v-text="html"></div>
  
  <br/>
  
  <div v-html="html"></div>
  <button @click="test"></button>
  <button @click="setNewValue">setNewValue</button>
  
  {{ temp }}
  
  <div v-if="student.addr" v-text="student.addr"></div>
  <button v-if="student.addr" @click="student.addr='12312312'">change addr</button>
  
  
</div>

Vue

new Vue({
	el: '#app',
  data: {
		html: '<html><body><span>H T M L</span></body></html>',
    info: [1, 2, 3],
    temp: 4,
    student: {
    	age: 10,
      name: 'john',
    },
  },
  methods: {
  	test: function() {
    	this.info.forEach((value) => {
      	this.temp = value;
      });
    },
    setNewValue: function() {
    	this.$set(this.student, 'addr', 'jungle!');
    },
  },
});


// HTML을 출력하는 functional component라는게 있는데 컴포넌트 할때 설명.