<!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. Django - ORM - 事务, 乐观锁, 悲观锁

    事务 概念 Transaction 事务:一个最小的不可再分的工作单元:通常一个事务对应一个完整的业务(例如银行账户转账业务,该业务就是一个最小的工作单元) 一个完整的业务需要批量的DML(inser ...

  2. spring 使用@Valid校验数据出错DEBUG org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod - Failed to resolve argument 0 of type

    问题原因:在 @Valid 的那个参数后面紧跟着一个 BindingResult 的参数(一定要紧跟着) 参考来源:https://segmentfault.com/q/101000000838468 ...

  3. python 内置数据结构 切片

    切片 通过索引区间访问线性结构的一段数据 sequence[start:stop] 表示返回[start,stop]区间的子序列 支持负索引 start为0,可以省略 stop为末尾,可以省略 超过上 ...

  4. CMake版本升级

    CMake 是一个可扩展的开源系统,以独立于编译器的方式在操作系统中管理生成过程.与许多跨平台系统不同,CMake 旨在与本机生成环境结合使用.放置在每个源目录中的简单配置文件(称为 CMakeLis ...

  5. Linux系统下GDB调试

    GDB 一.gdb常用命令: 命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 in ...

  6. Mybatis插件之Mybatis-Plus的CRUD方法

    使用Mybatis-plus进行基本的CRUD(增查改删)操作. 实体类(User)代码: import com.baomidou.mybatisplus.annotation.IdType; imp ...

  7. C语言控制台软件制作

    本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...

  8. Java集合框架概述和集合的遍历

    第三阶段 JAVA常见对象的学习 集合框架概述和集合的遍历 (一) 集合框架的概述 (1) 集合的由来 如果一个程序只包含固定数量的且其生命周期都是已知的对象,那么这是一个非常简单的程序. 通常,程序 ...

  9. PTA(Advanced Level)1050.String Subtraction

    Given two strings S1 and S2, S=S1−S2 is defined to be the remaining string after taking all the char ...

  10. Android Stadio导入Android工程项目，只有Edit Configurations的解决办法

    这几天导入老的Android工程项目,导入后,也不发红也不报错,但是Run这一项没有可运行的App,就只有一个Edit Configurations.经过查询后,发现运行一下Sync Project ...