<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

         .talk_con {

             width: 600px;

             height: 500px;

             border: 1px solid #666;

             margin: 50px auto 0;

             background: #f9f9f9;

         }

         .talk_show {

             width: 580px;

             height: 420px;

             border: 1px solid #666;

             background: #fff;

             margin: 10px auto 0;

             overflow: auto;

         }

         .talk_input {

             width: 580px;

             margin: 10px auto 0;

         }

         .whotalk {

             width: 80px;

             height: 30px;

             float: left;

             outline: none;

         }

         .talk_word {

             width: 420px;

             height: 26px;

             padding: 0px;

             float: left;

             margin-left: 10px;

             outline: none;

             text-indent: 10px;

         }

         .talk_sub {

             width: 56px;

             height: 30px;

             float: left;

             margin-left: 10px;

         }

         .atalk {

             margin: 10px;

         }

         .atalk span {

             display: inline-block;

             background: #0181cc;

             border-radius: 10px;

             color: #fff;

             padding: 5px 10px;

         }

         .btalk {

             margin: 10px;

             text-align: right;

         }

         .btalk span {

             display: inline-block;

             background: #ef8201;

             border-radius: 10px;

             color: #fff;

             padding: 5px 10px;

         }

     </style>

     <script src="vue.js"></script>

     <script type="text/javascript">

     </script>

 </head>

 <body>

 <div class="talk_con">

     <div class="talk_show" id="words">

         <div :class="[(name.who=='A')?'atalk':'btalk'] " v-for="name in aTalk">

             <span>{{ name.who }}说:{{ name.word }}</span>

         </div>

     </div>

     <div class="talk_input">

         <select class="whotalk" id="who" v-model="who">

             <option value="0">A说：</option>

             <option value="1">B说：</option>

         </select>

         <input type="text" class="talk_word" id="talkwords" v-model="talk">

         <input type="button" value="发送" class="talk_sub" id="talksub" @click="fun">

     </div>

 </div>

 <script>

     var vm = new Vue({

         el: '.talk_con',

         data: {

             aTalk: [

                 {who: "A", word: '吃饭了么'},

                 {who: "B", word: '还没呢,你呢'}

             ],

             who: 0,

             talk: ''

         },

         methods: {

             fun() {

                 if (this.talk == '') {

                     alert('不能为空')

                     return;

                 }

                 this.aTalk.push({who: (this.who == 0) ? "A" : "B",word:this.talk})

                 this.talk =''

             }

         }

     })

 </script>

 </body>

 </html>

vue 写一个聊天工具的更多相关文章

  1. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  2. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  3. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

  4. 使用原生node写一个聊天室

    在学习node的时候都会练习做一个聊天室的项目,主要使用socket.io模块和http模块.这里我们使用更加原始的方式去写一个在命令行聊天的聊天室. http模块,socket.io都是高度封装之后 ...

  5. 手写一个LRU工具类

    LRU概述 LRU算法,即最近最少使用算法.其使用场景非常广泛,像我们日常用的手机的后台应用展示,软件的复制粘贴板等. 本文将基于算法思想手写一个具有LRU算法功能的Java工具类. 结构设计 在插入 ...

  6. 使用Vue写一个九九乘法表

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表, ...

  7. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  8. 如何手写一个js工具库？同时发布到npm上

    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...

  9. 教你用Vue写一个开心消消乐

    之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...

随机推荐

  1. 【转】Android性能优化之GPU过度绘制与图形渲染优化

    标签: android / 优化 / 过度绘制 / 图形渲染优化 Android之GPU过度绘制与图形渲染优化 写在前面的话 本文主要对过度绘制和图形渲染做一个概念性的描述,和简单的优化措施. 如果你 ...

  2. 基于 IOCP 的通用异步 Windows Socket TCP 高性能服务端组件的设计与实现

    设计概述 服务端通信组件的设计是一项非常严谨的工作,其中性能.伸缩性和稳定性是必须考虑的硬性质量指标,若要把组件设计为通用组件提供给多种已知或未知的上层应用使用,则设计的难度更会大大增加,通用性.可用 ...

  3. Linux IO多路复用之epoll网络编程(含源码)

    前言 本章节是用基本的Linux基本函数加上epoll调用编写一个完整的服务器和客户端例子,可在Linux上运行,客户端和服务端的功能如下: 客户端从标准输入读入一行,发送到服务端 服务端从网络读取一 ...

  4. win10系统安装loadrunner11提示“为了对电脑进行保护 已经阻止此应用”的解决方案

    在执行loadrunner安装包中的setup.exe时会有如下提示: 解决方法:点击Win+R快捷键打开运行,输入“ gpedit.msc”按下回车键打开组策略编辑: 在左边选择[计算机配置]→[W ...

  5. UVa 12714 Two Points Revisited (水题，计算几何)

    题意:给定一条线段,让你求一条线段与已知线段垂直,并且所有线段的坐标的点的坐标都不大于给定的坐标的最大值且不能为负数. 析:没啥好说的,随便找一条就好. 代码如下: #pragma comment(l ...

  6. bzoj 3270: 博物馆【dp+高斯消元】

    好像是高斯消元解互相推(?)的dp的例子 首先考虑dp,设f[i][j]为一人在i一人在j的概率,点i答案显然就是f[i][i]: 然后根据题意,得到转移是 \[ f[i][j]=f[i][j]*p_ ...

  7. logstsh | logstash-input-jdbc 启动错误收集

    1: Failed to execute action {:action=>LogStash::PipelineAction::Create/pipeline_id:main, :excepti ...

  8. 浅谈Windows API编程

    WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...

  9. [POI2007]天然气管道Gaz

    Description Mary试图控制成都的天然气市场.专家已经标示出了最好的天然气井和中转站在成都的地图.现在需要将中转站和天然气井连接起来.每个中转站必须被连接到正好一个钻油井,反之亦然. Ma ...

  10. 模拟/字符串处理 UVALive 6833 Miscalculatio

    题目传送门 /* 模拟/字符串处理:主要是对*的处理,先把乘的预处理后再用加法,比如说是:1+2*3+4 = 1+..6+4 = 11 */ #include <cstdio> #incl ...