1. 程式人生 > >vue實現簡單聊天視窗

vue實現簡單聊天視窗

構建:

  • 輸入:input
  • 提交:button
  • 歷史訊息展示:ul

實現:

  • 資料展示到介面:data
  • 介面資料動態變化:操作data
  • 資料重新整理: this.data = value
<div id="app">
        <ul>
            <li v-for="item in message_array">{{item}}</li>
        </ul>
        <input type="text" v-model="message"/>
        <button v-on:click="dealMessage">add</button>
</div>
new  Vue({
     el:"#app",
     data:{
         message_array:[],
         message:''
     },
     methods:{
         dealMessage: function () {
             this.message_array.push(this.message);
             this.message = '';
         }
     }
 })