vue實現簡單聊天視窗
阿新 • • 發佈:2018-12-03
構建:
- 輸入: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 = '';
}
}
})