vue input实现点击按钮文字增删功能示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了vue input实现点击按钮文字增删功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>3water.com vue点击按钮文字增删</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
 </style>
</head>
<body>
<div id="app">
 <input type="text" v-model="text">
 <button @click="add">add</button>
 <button @click="clear">remove</button>
 <button @click="clean">remove one</button>
 <div v-for="x in arr" class="box">{{x}}</div>
</div>
<div id="app-2">
 <span v-bind:title="message">
 鼠标悬停几秒钟查看此处动态绑定的提示信息!
 </span>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
 var app2 = new Vue({
  el: '#app-2',
  data: {
   message: '页面加载于 ' + new Date().toLocaleString()
  }
 });
 const app=new Vue({
  el:"#app",
  data:{
   arr:[],
   text:""
  },
  methods:{
   add(){
    this.arr.push(this.text);
   },
   clear(){
    this.arr=[]
   },
   clean(){
    this.arr.pop();
   }
  }
 })
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

vue input实现点击按钮文字增删功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
You might like
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python flask框架post接口调用示例
2019/07/03 Python
django中的图片验证码功能
2019/09/18 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python中xlutils库用法浅析
2020/12/29 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
单位未婚证明范本
2014/01/18 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
《金子》教学反思
2014/04/13 职场文书
大学生求职信
2014/06/17 职场文书
统计学教授推荐信
2014/09/18 职场文书
检讨书格式
2015/01/23 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL