vue create&append DOM элемент пример js

160

18 декабря 2018, 12:30

Начала изучать vue пару дней назад. Разобралась с тем, как отрисовывать компоненты, но так и не поняла, как добавлять по событию элемент в dom. Конкретно, вопрос состоит в том, могу ли я в vue создать аналогично javascript dom-элемент по нажатию кнопки, а не так: jsfiddle?

html:

<div id="app">
<input type="text" id="inp">
<button id="bt" >
send
</button>
</div>

js:

let app=document.querySelector('#app');
let bt=document.querySelector('#bt');
let inp=document.querySelector('#inp');
bt.addEventListener('click',function(){
    let p=document.createElement('p');
    p.innerHTML= inp.value;
    app.appendChild(p);
});

ссылка на jsfiddle

Answer 1

Конечно можно. Я за это любля Vue, что такие простые вещи так просто и делаются. Надеюсь ты сможешь разобраться с кодом.

PS. можно запустить код прямо здесь на сайте

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> 
 
<div id="app"> 
  <input v-model="input" type="text" @keypress.enter="add"> 
  <button type="button" @click="add"> 
    add 
  </button> 
  <ul> 
    <li v-for="(item, i) in items" :key="i"> 
      {{ item }} 
    </li> 
  </ul> 
</div> 
 
<script> 
  new Vue({ 
    el: '#app', 
    data () { 
      return { 
        input: null, 
        items: ['one', 'two'] 
      } 
    }, 
    methods: { 
      add () { 
        this.items.push(this.input); 
        this.input = ''; 
      } 
    } 
  }); 
</script>