<!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 发布微博的案例

VUE实现微博发布效果的更多相关文章

  1. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  2. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  3. 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  4. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  5. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  6. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  7. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...

  8. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  9. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...

随机推荐

  1. SQL-W3School-高级:SQL ALIAS(别名)

    ylbtech-SQL-W3School-高级:SQL ALIAS(别名) 1.返回顶部 1. 通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Ali ...

  2. 【python】详解事件驱动event实现

    [python]详解事件驱动event实现 所有的计算机程序都可以大致分为两类:脚本型(单次运行)和连续运行型(直到用户主动退出). 1.脚本型:脚本型的程序包括最早的批处理文件以及使用Python做 ...

  3. PHP判断访问者是PC端还是移动端

    function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { ...

  4. Apache实现一台服务器上运行多个网站

    总共有三种方法:通过不同的IP地址 通过不同的域名 通过不同的端口号 (1).通过不同的IP地址实现 例如一台CentOS7有两个IP:192.168.5.101和192.168.5.103 [roo ...

  5. sersync+rsync做实时同步

    (1).实验环境 源主机:youxi1 192.168.5.101 目的主机:youxi2 192.168.5.102 目的:实时同步数据 sersync默认端口874,rsync默认端口873 (2 ...

  6. linux安装IDEA 2017

    下载 IDEA 2017 链接:http://pan.baidu.com/s/1skTKdFR 密码:yug3 解压 下载的文件    tar zxvf idea-IU-172.4155.36.tar ...

  7. mysql大数据量下优化

    1 优化sql和索引2 增加缓存如:redis3 主从复制或主主复制,读写分离4 利用mysql自带分区表5 先做垂直拆分,将一个大系统分为多个小系统,也就是分布式6 水平切分,要选择一个合理的sha ...

  8. 游戏数值——LOL篇 以LOL为起点-说游戏数值设计核心思路

      附     文   文档在今年三月份我动笔写了一小部分,但当时思路凌乱,行文梗阻,于是丢在一边构思了半年,现在又回过头来慢慢写,希望能写好写完吧,初衷是希望即时萌新也能看懂,但是好像并不能行——本 ...

  9. [Python]Excel编程示例教程(openpyxl)

    1 前言(Preface) 博文背景:论文实验中有一大堆数据集需要观测其数据特征,通过人体肉眼,难以直观感受,故而准备通过生成Excel,可视化其评测数据. We know: Excel便于可视化分析 ...

  10. WordPress创建多个page页面模板文件

    一般我们使用WordPress创建多个page页面模板文件,有两种方法: 一种是,创建page-$id.php文件 这样的文件是通过WordPress默认的链接查询来创建page页面模板文件,就是使用 ...