<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>微博發布效果</title> <style> body, ul, p { margin: 0; padding: 0; } .weibo { width: 600px; border: 1px solid #ccc; margin: 100px auto; padding: 10px; } .weibo-text { width: 590px; height: 140px; padding: 5px; border: 1px solid #ccc; outline: none; resize: none; } .weibo-text:focus { border-color: #f60; } .weibo-btn { width: 80px; height: 30px; background-color: #f90; color: #fff; border: 0 none; margin-top: 5px; border-radius: 3px; cursor: pointer; outline: 0 none; } .weibo-list { padding-top: 10px; list-style: none; } .weibo-list li { font-size: 14px; line-height: 30px; border-bottom: 1px dotted #ccc; overflow: hidden; } .weibo-list li p { float: left; } .weibo-list li span { float: right; cursor: pointer; } .weibo-list li input { height: 24px; line-height: 24px; width: 300px; font-size: 14px; border: 0 none; } .time { margin-right: 10px; font-style: normal; float: right; } .spans { float: right; color: #f40; } </style> </head> <body> <div id='app' class="weibo"> <textarea class="weibo-text" v-model='text' @keyup.shift.13='fabu' @input='a'></textarea> <input class="weibo-btn" value="發布" type="button" @click="fabu"><span class="spans">{{ len }}/100</span> <ul class="weibo-list"> <!-- v-for 可以遍歷數組 獲取值 和索引 --> <li v-for='(item,index) in xhs'> <p class="a" class="content">{{item}}</p> <span class="time"></span> <!-- 點擊刪除的時候傳一個數組的索引 --> <span class="del" @click='del(index)'>刪除</span> </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { // 留言的內容 xhs: [], // 輸入的內容 text: '', // 規定輸入的長度 len: '100', }, methods: { // 點擊發布 fabu() { // 因為用了v-model 所以可以獲取文本域的值 this.xhs.push(this.text); // 發布完之后回到初始值 this.text = ''; this.len = '100' }, // 刪除 del(index) { this.xhs.splice(index, 1) }, // 文本域改變事件 a() { this.len = 100 - (this.text.length); // 給他一個條件是因為 用戶在復制進去的時候可輸入的字數會變成負數 if (this.len < 0) { this.len = 0; } // 輸入100個字節的時候就不可以輸入了 this.text = this.text.substr(0, 99) } } }) </script> </html> <!-- 有什么bug聯系我 謝謝-------- -->
實現簡單的vue 發布微博的案例
