vue 写一个聊天工具

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style type="text/css">
  9         .talk_con {
 10             width: 600px;
 11             height: 500px;
 12             border: 1px solid #666;
 13             margin: 50px auto 0;
 14             background: #f9f9f9;
 15         }
 16 
 17         .talk_show {
 18             width: 580px;
 19             height: 420px;
 20             border: 1px solid #666;
 21             background: #fff;
 22             margin: 10px auto 0;
 23             overflow: auto;
 24         }
 25 
 26         .talk_input {
 27             width: 580px;
 28             margin: 10px auto 0;
 29         }
 30 
 31         .whotalk {
 32             width: 80px;
 33             height: 30px;
 34             float: left;
 35             outline: none;
 36         }
 37 
 38         .talk_word {
 39             width: 420px;
 40             height: 26px;
 41             padding: 0px;
 42             float: left;
 43             margin-left: 10px;
 44             outline: none;
 45             text-indent: 10px;
 46         }
 47 
 48         .talk_sub {
 49             width: 56px;
 50             height: 30px;
 51             float: left;
 52             margin-left: 10px;
 53         }
 54 
 55         .atalk {
 56             margin: 10px;
 57         }
 58 
 59         .atalk span {
 60             display: inline-block;
 61             background: #0181cc;
 62             border-radius: 10px;
 63             color: #fff;
 64             padding: 5px 10px;
 65         }
 66 
 67         .btalk {
 68             margin: 10px;
 69             text-align: right;
 70         }
 71 
 72         .btalk span {
 73             display: inline-block;
 74             background: #ef8201;
 75             border-radius: 10px;
 76             color: #fff;
 77             padding: 5px 10px;
 78         }
 79     </style>
 80     <script src="vue.js"></script>
 81     <script type="text/javascript">
 82 
 83     </script>
 84 </head>
 85 <body>
 86 
 87 <div class="talk_con">
 88     <div class="talk_show" id="words">
 89         <div :class="[(name.who=='A')?'atalk':'btalk'] " v-for="name in aTalk">
 90             <span>{{ name.who }}说:{{ name.word }}</span>
 91         </div>
 92     </div>
 93     <div class="talk_input">
 94         <select class="whotalk" id="who" v-model="who">
 95             <option value="0">A说：</option>
 96             <option value="1">B说：</option>
 97         </select>
 98         <input type="text" class="talk_word" id="talkwords" v-model="talk">
 99         <input type="button" value="发送" class="talk_sub" id="talksub" @click="fun">
100     </div>
101 </div>
102 <script>
103     var vm = new Vue({
104         el: '.talk_con',
105         data: {
106             aTalk: [
107                 {who: "A", word: '吃饭了么'},
108                 {who: "B", word: '还没呢,你呢'}
109             ],
110             who: 0,
111             talk: ''
112         },
113         methods: {
114             fun() {
115                 if (this.talk == '') {
116                     alert('不能为空')
117                     return;
118                 }
119                 this.aTalk.push({who: (this.who == 0) ? "A" : "B",word:this.talk})
120                 this.talk =''
121             }
122         }
123     })
124 </script>
125 </body>
126 </html>