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>