vue 写一个聊天工具
<!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 写一个聊天工具的更多相关文章
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 使用原生node写一个聊天室
在学习node的时候都会练习做一个聊天室的项目,主要使用socket.io模块和http模块.这里我们使用更加原始的方式去写一个在命令行聊天的聊天室. http模块,socket.io都是高度封装之后 ...
- 手写一个LRU工具类
LRU概述 LRU算法,即最近最少使用算法.其使用场景非常广泛,像我们日常用的手机的后台应用展示,软件的复制粘贴板等. 本文将基于算法思想手写一个具有LRU算法功能的Java工具类. 结构设计 在插入 ...
- 使用Vue写一个九九乘法表
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表, ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- 如何手写一个js工具库?同时发布到npm上
自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
- 教你用Vue写一个开心消消乐
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...
随机推荐
- IOS UI 设计 技术
AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds) =====> 程序员—(N ...
- 用dpkg命令制作deb包方法总结
用dpkg命令制作deb包方法总结 如何制作Deb包和相应的软件仓库,其实这个很简单.这里推荐使用dpkg来进行deb包的创建.编辑和制作. 首先了解一下deb包的文件结构: deb 软件包里面的结构 ...
- 【转】Google 发布 Android 性能优化典范(比较老,但很实用)
2015年伊始,Google发布了关于Android性能优化典范的专题, 一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有 ...
- 并不对劲的bzoj1305: [CQOI2009]dance跳舞
传送门-> 又是陈年老坑. 听上去不知道从何下[手]?那要是把题目换成“判断这些人能否条x支舞”呢? 这样就变成了一个网络流可以解决的问题,只要把每个人拆成喜欢和不喜欢两点,每个人两点总流量不超 ...
- robotframework收藏
收藏文章 http://www.360doc.com/userhome/38592059
- mysql 联合2个列的数据 然后呈现出来
SELECT a.voyageNum,CONCAT(a.startDate,'~',a.endDate) AS 日期 FROM tchw_voyageoilcost a ,tchw_voyageoi ...
- 小程序各种授权封装、saveImageToPhotosAlbum、chooseAddress、getUserInfo、getLocation,保存图片、获取用户信息、获取位置信息、收货地址等
代码略多,请异步 github __点击链接
- WPF-按钮美化
我们不多哔哔,先放图: 美化按钮背景: 当我们用系统默认的按钮风格似乎太老套,而且不太美观,某些情况下我们需要对按钮进行美化和重绘,只有这样才能满足我们的需要 按钮美化思维引导: 图中1 为控件Bor ...
- LightOj 1197 Help Hanzo (区间素数筛选)
题目大意: 给出T个实例,T<=200,给出[a,b]区间,问这个区间里面有多少个素数?(1 ≤ a ≤ b < 231, b - a ≤ 100000) 解题思路: 由于a,b的取值范围 ...
- C# System.IO 文件流输入输出
一.读写文本文件 可以用fileStream来读写文本文件,但是FileStream是通过字节形式来读写数据的,要把字节数据转换为文本,要自己处理编码转换. 对于文本文件的读写,通常用 StreamR ...