快捷導(dǎo)航

vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能示例

更新時(shí)間：2019年01月29日 09:46:28 作者：s_psycho

這篇文章主要介紹了vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能,涉及基于vue.js的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能。分享給大家供大家參考，具體如下：

<!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>www.dbjr.com.cn vue點(diǎn)擊按鈕文字增刪</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">
 鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
 </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: '頁(yè)面加載于 ' + 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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue鼠標(biāo)點(diǎn)擊事件和鍵盤(pán)事件舉例詳解
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點(diǎn)擊事件"、"鼠標(biāo)移動(dòng)事件"、"鍵盤(pán)事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點(diǎn)擊事件和鍵盤(pán)事件的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue中使用@change的方法
@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當(dāng)前的參數(shù)呢？本文給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-11-11
Vue.js 父子組件通信的十種方式
最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，寫(xiě)文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧
2018-10-10
Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例
這篇文章主要介紹了Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟
最近接了個(gè)小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會(huì)出現(xiàn)一些小問(wèn)題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下
2023-10-10
用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法
今天小編就為大家分享一篇用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue中組件的3種使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue父組件監(jiān)聽(tīng)子組件生命周期
這篇文章主要介紹了Vue父組件監(jiān)聽(tīng)子組件生命周期,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
vue-cli中的babel配置文件.babelrc實(shí)例詳解
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧
2018-02-02
在導(dǎo)入.vue文件的時(shí)候,ts報(bào)錯(cuò)提示:找不到模塊“@/Layout/index.vue”或其相應(yīng)的類(lèi)型聲明問(wèn)題
這篇文章主要介紹了在導(dǎo)入.vue文件的時(shí)候,ts報(bào)錯(cuò)提示:找不到模塊“@/Layout/index.vue”或其相應(yīng)的類(lèi)型聲明問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08