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

本文实例讲述了某视频剪辑软件输入实现点击按钮文字增删功能。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible '内容=' ie=edge ' titlewww.jb51.net vue点击按钮文字增删/title style * { margin : 0；padd : 0；列表样式：无；}/style/head dydiv id=' app '输入类型='text' v-model='text '按钮@ click=' add ' add/button @ click=' clear ' remove/button @ click=' clean ' remove one/button div v-for=' x in arr ' class=' box ' { x } }/div/div div id=' app-2 ' span v-bind 3360 title=' message '鼠标悬停几秒钟查看此处动态绑定的提示信息！/span/div/body脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/脚本脚本var app 2=new Vue({ El : ' # app-2 '，data: { message: '页面加载于新日期()。tolocalesting()} })；const app=new Vue({ el:'#app '，data:{ arr:[]，text:'' }，methods : { add(){ this。由…改编推(这个。文本)；}，clear(){ this.arr=[] }，clean(){ this。由…改编pop()；} } })/脚本/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

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