vue input實現(xiàn)點擊按鈕文字增刪功能示例
更新時間：2019年01月29日 09:46:28 作者：s_psycho
這篇文章主要介紹了vue input實現(xiàn)點擊按鈕文字增刪功能,涉及基于vue.js的事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue input實現(xià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>chabaoo.cn 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">
鼠標懸停幾秒鐘查看此處動態(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: '頁面加載于 ' + 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.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行效果：
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點擊事件"、"鼠標移動事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關于Vue鼠標點擊事件和鍵盤事件的相關資料,需要的朋友可以參考下2024-01-01
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當前的參數(shù)呢？本文給大家詳細講解,感興趣的朋友一起看看吧2023-11-11
最近一直在做 Vue項目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
Vue項目使用Websocket大文件FileReader()切片上傳實例
這篇文章主要介紹了Vue項目使用Websocket大文件FileReader()切片上傳實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近接了個小活,其中甲方要求把vue項目打包成exe安裝在windows上,其中有也會出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關于將vue項目打包成電腦端應用.exe的完整步驟,需要的朋友可以參考下2023-10-10
今天小編就為大家分享一篇用vue-cli開發(fā)vue時的代理設置方法，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于vue中組件的3種使用方式，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
vue-cli中的babel配置文件.babelrc實例詳解
Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
在導入.vue文件的時候,ts報錯提示:找不到模塊“@/Layout/index.vue”或其相應的類型聲明問題
這篇文章主要介紹了在導入.vue文件的時候,ts報錯提示:找不到模塊“@/Layout/index.vue”或其相應的類型聲明問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08