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 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
详解基于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分页类的代码
2011/05/18 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
自我评价范文分享
2014/01/04 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
八达岭长城导游词
2015/01/30 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
体育委员竞选稿
2015/11/21 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
总结Python使用过程中的bug
2021/06/18 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript